React Js Display Mouse/Cursor Position on Screen

<!DOCTYPE html>
<html>

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

function App() {
            const [mousePos, setMousePos] = useState({ x: 0, y: 0 });

useEffect(() => {
                const handleMouseMove = (e) =>
                    setMousePos({ x: e.clientX, y: e.clientY });
                document.addEventListener("mousemove", handleMouseMove);
                return () =>
                    document.removeEventListener("mousemove", handleMouseMove);
            }, []);

return (
                <div className='container'>
                    <h3>React Js Display Mouse Position on the Screen</h3>
                    <p>
                        Mouse position: {mousePos.x}, {mousePos.y}
                    </p>
                </div>
            );
        }

ReactDOM.render(<App />, document.getElementById("app"));
    </script>

</style>
</body>

</html>