DOM elements in react component with transition:persist directive do not update when hook triggers re-render

[flocbit]

Astro Info

Astro                    v5.3.0
Node                     v23.6.1
System                   macOS (arm64)
Package Manager          pnpm
Output                   static
Adapter                  none
Integrations             @astrojs/mdx
                         astro-icon
                         @astrojs/sitemap
                         @astrojs/react

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

When adding the transition:persist directive to a react component, state is maintained. However when a react hook triggers a re-render, the DOM elements are not updated.

See the Stackblitz where I added console log statements that show that the react component does re-render but the DOM elements are not updated.

What's the expected result?

The component should re-render when the hook changes.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-2a65qjcy?file=src%2Fcomponents%2Fnavbar-report-selection.tsx

Participation

• I am willing to submit a pull request for this issue.

[ematipico]

cc @martrapp and @matthewp for triaging