I have this code in App.js. Mac's voice over can detect all the elements on this page and it keeps spelling out the text on each one by one.

const WelcomePage = () => {
  const [isWarningPage, setisWarningPage] = useState(false);
  if (!isWarningPage) {
    return (
      <>
        <div class="container-fluid">
          <div className="welcome-section">
            <div className="logo-container">
              <img src={logo} alt="" />
            </div>
            <div className="welcome-content">
              <h2 aria-level="1">Welcome to My Website</h2>
              <h5 aria-level="5">
                Connecting you to my web.
              </h5>
              <h5 className="child2" aria-level="5">
                We are happy to see you.
              </h5>
            </div>
            <div>
              <button
                onClick={() => setisWarningPage(true)}
                id="GetStartedBtn"
                aria-label="Get Started"
              >
                Get Started
              </button>
            </div>
          </div>
        </div>
      </>
    );
  }
  return PhishingWarningPage;
};

But, when I click on the "Get Started" button, Mac's Voice Over cannot detect the mounted component (Warning page). Then I focused the element using some javascript. Why does it happens?

What are my options here?

Thank you!