Toggle full screen double click issue

Hello, I am trying to make a full screen button for my webGL project. I have tried a few different options and I always run into the same problem. The issue I am having is having to double click the button to activate full screen. To exit full screen with the button, I never have to double click. Does anyone know any solutions to this issue?

Also highly unlikely, but if it is a quirk of Screen.fullScreen how can I solve this?

Here are the following things I have tried, which is getting called on click on the button:

 public function toggleFullScreen () {
      Screen.fullScreen = !Screen.fullScreen;
 }

and

 public function toggleFullScreen () {
      if (Screen.fullScreen == !Screen.fullScreen) {
          Screen.fullScreen = false;
      } 
      else {
          Screen.fullScreen = !Screen.fullScreen;
      }
  }

and

 public function toggleFullScreen () {
     
     if (!Screen.fullScreen) {
          Screen.fullScreen = true;
         
      }
      else {
          Screen.fullScreen = !Screen.fullScreen;
 
      }
 }