Reactjs – how to prevent user to escape full screen in next js

I am using version 14 of Next.js, and I want to write code for a scenario where when a user clicks the start button, it goes into full screen. Now, when the user presses Escape for the first time, they should receive a warning saying ‘Are you sure you want to exit full view?’ If the user presses Escape again, then the screen should exit. I wrote some code with the help of ChatGPT, but it’s not working at all. Can anyone help me rewrite this code?

 "use client";
    import { useEffect, useState } from "react";
    
    export default function Test() {
      const [isFullScreen, setIsFullScreen] = useState(false);
      const [warningShown, setWarningShown] = useState(false);
    
      const goFullScreen = () => {
        const elem = document.documentElement;
        if (elem.requestFullscreen) {
          elem.requestFullscreen();
        } else if (elem.mozRequestFullScreen) {
          /* Firefox */
          elem.mozRequestFullScreen();
        } else if (elem.webkitRequestFullscreen) {
          /* Chrome, Safari, Opera */
          elem.webkitRequestFullscreen();
        } else if (elem.msRequestFullscreen) {
          /* IE/Edge */
          elem.msRequestFullscreen();
        }
        setIsFullScreen(true);
        setWarningShown(false);
      };
    
      const exitFullScreen = () => {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
          /* Firefox */
          document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
          /* Chrome, Safari, Opera */
          document.webkitExitFullscreen();
        } else if (document.msExitFullscreen) {
          /* IE/Edge */
          document.msExitFullscreen();
        }
        setIsFullScreen(false);
      };
    
      console.log(isFullScreen)
      useEffect(() => {
        const handleEsc = (event) => {
          console.log("escape")
          if (event.key === "Escape" && isFullScreen) {
            if (!warningShown) {
              event.preventDefault(); // Prevent exiting full screen on first Escape
              alert("Press Escape again to end the test.");
              setWarningShown(true);
            } else {
              exitFullScreen();
            }
          }
        };
    
        // Setup and cleanup of the event listeners for the Escape key
        window.addEventListener("keydown", handleEsc);
        return () => {
          window.removeEventListener("keydown", handleEsc);
        };
      }, [warningShown, isFullScreen]); // Depend on warningShown and isFullScreen
    
      // Handle changes in the full-screen status
      useEffect(() => {
        const handleFullscreenChange = () => {
          const isCurrentlyFullScreen = document.fullscreenElement != null;
          setIsFullScreen(isCurrentlyFullScreen);
          if (!isCurrentlyFullScreen) {
            setWarningShown(false); // Reset warning when leaving full screen
          }
        };
    
        document.addEventListener("fullscreenchange", handleFullscreenChange);
        document.addEventListener("webkitfullscreenchange", handleFullscreenChange);
        document.addEventListener("mozfullscreenchange", handleFullscreenChange);
        document.addEventListener("MSFullscreenChange", handleFullscreenChange);
    
        return () => {
          document.removeEventListener("fullscreenchange", handleFullscreenChange);
          document.removeEventListener(
            "webkitfullscreenchange",
            handleFullscreenChange
          );
          document.removeEventListener(
            "mozfullscreenchange",
            handleFullscreenChange
          );
          document.removeEventListener(
            "MSFullscreenChange",
            handleFullscreenChange
          );
        };
      }, []);
    
      const handleStart = () => {
        console.log("handleStart");
      };
    
      return (
        <div>
          {!isFullScreen ? (
            <button onClick={goFullScreen}>Start Test</button>
          ) : (
            <>
              <h1>Test is running...</h1>
              <button onClick={handleStart}>Start</button>
            </>
          )}
        </div>
      );
    }