React Js Track Time Spent on Webpage

<!DOCTYPE html>
<html>

<body>
    <div id="app"></div>
    <script type="text/babel">
        const { useState, useEffect } = React;

function App() {
            const [time, setTime] = useState(0);
            const [intervalId, setIntervalId] = useState(null);
            const [pageLoadTime, setPageLoadTime] = useState(Date.now());
            const [isActive, setIsActive] = useState(true);

useEffect(() => {
                const interval = setInterval(() => {
                    if (isActive) {
                        setTime(Date.now() - pageLoadTime);
                    }
                }, 1000);

return () => {
                    clearInterval(interval);
                };
            }, [isActive, pageLoadTime]);

useEffect(() => {
                const handleVisibilityChange = () => {
                    setIsActive(!document.hidden);
                    if (!document.hidden) {
                        setPageLoadTime(Date.now() - time);
                    }
                };

document.addEventListener('visibilitychange', handleVisibilityChange);

return () => {
                    document.removeEventListener('visibilitychange', handleVisibilityChange);
                };
            }, [time]);

return (
                <div className="container">
                    <h1>React Measure Time Spent on Page</h1>
                    <p>Time Spent on Page: {formattedTime}</p>
                </div>
            );
        }

ReactDOM.render(<App />, document.getElementById("app"));
    </script>
    <style>
        * {
            box-sizing: border-box;
        }

.container {
            margin: 0 auto;
            width: 600px;
            text-align: center;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24);
            padding: 20px;
        }  
    </style>
</body>

</html>