I'm trying to create a website in ReactJS but can't seem to be able to control button show time in model-viewer. I used to able to control button show time using this:

<script>
  const modelViewer = document.querySelector("model-viewer");
  const button = document.getElementById("arbutton");
  
  function checkagain() {
    if (modelViewer.modelIsVisible === true) {
        button.style.display = "block";
    }
    else {
        checkagain2 = setTimeout(showbutton, 5);
    }
  }
  function showbutton() {
    if (modelViewer.modelIsVisible === true) {
        button.style.display = "block";
    }
    else {
        checkagain1 = setTimeout(checkagain, 5);
    }
  } 
  modelViewer.addEventListener("load", function() {
    showbutton();
  });
</script>

From this link

And this is how I'm importing Model-Viewer in ReactJS:

<Helmet>
  <script
    type="module"
    src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"
    async
  />
</Helmet>

<model-viewer
  ar ar-modes="webxr scene-viewer quick-look"
  style={{width:"100%", height:"50vh"}}
  alt="Your model Loading"
  //shadow-intensity="1"
  environment-image="neutral"
  exposure="1"
  poster="https://modelviewer.dev/assets/poster-astronaut.png"
  camera-controls
  loading="eager"
  src="https://modelviewer.dev/shared-assets/models/NeilArmstrong.glb"
  enable-pan
>
<button id="arbutton" className="arbutton" slot="ar-button">👋 Show AR</button>
</model-viewer>