Expanding navmenu for screen readers

Question

What I want to achieve is to create a expanded/collapsed navmenu that will inform user for the button condition (collapsed or expanded) using screen-readers. I am enable to change value for 'aria-expanded' attribute with onClick, but screen-reader reads previous value. E.g. with expanded menu with clicking on the button, screen reader should say 'button expanded' - it instead says 'button collapsed'. If I again click the button in order to collapse it, it will say 'button expanded'. I strictly want to done it with the usage of React (not with JQuery help for e.g.). For testing, I use (Google Screen Reader extension).

Header__001.jsx

const Header__001 = () => {

   const ref1 = useRef(null);
   const ref2 = useRef(null);

   const openMenu =  (ref1, ref2) => {
      const navmenu = ref1.current;
      const button = ref2.current;
      if(a.classList.contains('myHideClass')) {
         navmenu.classList.remove('myHideClass');
         button.setAttribute('aria-expanded', true);
      } else {
         navmenu.classList.add('myHideClass');
         button.setAttribute('aria-expanded', false);
      }
   }

   return (
      <header className='header__001'>
         <div className="container">
            <div>
               Logo
            </div>
            <nav className="navmenu">
               <ul ref={ref1} className="navlist myHideClass" id="navlist">
                  <li>Item1</li>
                  <li>Item2</li>
                  <li>Item3</li>
               </ul>
               <button
                  ref={ref2}
                  className="hamburger" id="hamburger" aria-expanded="false"  
                  onClick={() => openMenu(ref1, ref2)}
               >
                  <FaBars aria-hidden="true" />
               </button>
            </nav>
            <div>
               <button>Click</button>
            </div>
         </div>
      </header>
   )
}


export default Header__001