React Js Website Loading Time Checker

<!DOCTYPE html>
<html>

<body>
  <div id="app"></div>
  <script type="text/babel">
    const { useState, useEffect } = React;
   function App() {
      const [loadingTime, setLoadingTime] = useState(null);
      const url = 'https://www.fontawesomeicons.com'; // Define url at a higher scope

useEffect(() => {
        const loadTime = async () => {
          const startTime = performance.now();

try {
            const response = await fetch(url);
            if (response.ok) {
              const endTime = performance.now();
              const loadingTimeInSeconds = (endTime - startTime) / 1000; // Convert to seconds
              setLoadingTime(loadingTimeInSeconds);
            } else {
              console.error(`Failed to fetch data from ${url}`);
            }
          } catch (error) {
            console.error(`Error fetching data: ${error}`);
          }
        };

loadTime();
      }, []); // Empty dependency array to run the effect once when the component mounts

return (
        <div className='container'>
          <h3>React Js Website Loading Time Checker </h3>
          {loadingTime !== null ? (
            <p>The loading time for the website {url} is {loadingTime} seconds.</p>
          ) : (
            <p>Loading...</p>
          )}
        </div>
      );
    }

ReactDOM.render(<App />, document.getElementById('app'));
  </script>
  <style>
    .container {
      width: 600px;
      margin: 0 auto;
      box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
      padding: 20px;
    }

</style>
</body>

</html>