React why state is updated through children but not updated through render props

I’m facing an issue with updating the value of a textarea in React when passing it through props. I have a modal component where I pass a textarea via a text prop. However, when the parent component’s state changes, the textarea content doesn’t update as expected.

Here’s an example of my code:

<ModalWithButton
  buttonText="Show"
  text={() => (
    <textarea
      value={description ?? ''}
      onChange={(e) => handleDescriptionChange(e.target.value)}
    />
  )}
/>

When I update the description state, the textarea does not re-render with the new value. I solved the problem by passing the textarea through children instead of using the text prop, and it worked:

<ModalWithButton
  buttonText="Show"
  buttonClassName="px-2"
  actionText="Close"
>
  <textarea
    value={description ?? ''}
    onChange={(e) => handleDescriptionChange(e.target.value)}
  />
</ModalWithButton>

Question: Why does the textarea not update when passed via the text prop, and why does passing it through children solve the issue?

Remark:

• I change state through react context
• For modal I use headlessUI Transition and Dialog components