Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v8.x

Current Behavior

When adding a input field or text area in an IonFooter, the elements are duplicated on first open & when the animation to other breakpoints starts. This only occurs when the scrollToExpand property is set to false.
When the sheet modal is closed and reopened on the same breakpoint again, there is only one text area element rendered.

Expected Behavior

I'm expecting only one text area element rendered, as I've defined in my codebase.

Steps to Reproduce

1. Go to https://stackblitz.com/~/github.com/ijsje71/footer-with-input-text-in-sheet-modal or clone the repo
2. Start the application
3. Notice the sheet modal opening with 2 rendered text area's
4. Now close the modal by dragging the sheet modal down
5. Click the open modal button
6. Notice the footer is now (correctly) rendering only one text area
7. Now drag the sheet modal to its second breakpoint
8. Notice that a second text area appears.

The same can be done with the IonInput. I've left that component commented out so that it can be easily reproduced with that modal as well. Make sure to refresh the page when you do, as the modal needs to be rendered again for the changes to take effect.

Code Reproduction URL

https://github.com/ijsje71/footer-with-input-text-in-sheet-modal#

Ionic Info

Ionic:

Ionic CLI : 7.2.0 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/react 8.5.3

Capacitor:

Capacitor CLI : 7.2.0
@capacitor/android : not installed
@capacitor/core : 7.2.0
@capacitor/ios : 7.2.0

Utility:

cordova-res : not installed globally
native-run : 2.0.1

System:

NodeJS : v22.14.0
npm : 10.9.2
OS : macOS Unknown

Additional Information

Since this is related to the expandToScroll false property & the sheet modal animations; it may be related to these issues:
#30315
#30312