hook does not rerender when text is changed

[szamanr]

problem

when initialising the hook, you pass the text to be spoken as children parameter. my text is coming from a component prop. when the prop is changed after rendering, the play() method still speaks the original text.

there is a set method returned by the hook, which can be used to update e.g. the language, but there is no way to update the text content. having a method like set.children() would work for me.

reproduction

const App = () => {
  const { text, setText } = useState("hi");

  return (
    <div>
      <span>{text}</span>
      <Speak text={text} />
      <button onClick={() => setText("hello")}>change</button>
    </div>
  );
}

const Speak = ({ text }) => {
  const { play } = useTts({
    children: <p>{text}</p>
  });

  return (
    <button onClick={play}>play</button>
  );
}

1. click "change"
2. click "play"

expected result: says "hello"
actual result: says "hi"