trigger an aria-live region with React state

Question

The react example below only exhibits the unexpected behavior on Firefox with VoiceOver.

Using the aria-live attribute on this p tag, I expect my screen reader to read me the text when it is updated. However, my screen reader is not reading me the updated text. The screen reader I'm using is VoiceOver on a macbook.

I have created the same little app with html and vanilla JS, and it works as expected . code and codepen link are below...

If you're on a mac and you've never done it before, hold command and press touchID 3 times to start VoiceOver.

Here is my react code... Link to codepen

// jsx
const App = () => {
  const [text, setText] = React.useState('hello')
  const handleClick = () => {
    if(text === 'hello') {
      setText('goodbye')
    } else {
      setText('hello')
    }
  }
  
  return (
    <div>
      <p aria-live="polite">{text}</p>
      <button
        type="button"
        onClick={handleClick}
      >
        click
      </button>
    </div>
  )
}

ReactDOM.render(<App />,
document.getElementById("root"))

<!-- html -->
<div id="root"></div>

...and here is my behaving-as-expected html/vanilla JS code... Link to codepen

<!-- html -->
<div>
  <p aria-live="polite" id="text">hello</p>
  <button
    type="button"
    id="btn"
  >
    click here
  </button>
</div>
<script>
  const text = document.getElementById('text');
  const btn = document.getElementById('btn');

  function handleClick() {
    if (text.innerText === 'hello') {
      text.innerText = 'goodbye';
    } else {
      text.innerText = 'hello';
    }
  }

  btn.addEventListener('click', handleClick);
</script>