Repository: react-native
Issue: [0.76.5] Modal glitchy behavior on iOS 
Labels: Platform: iOS,Issue: Author Provided Repro,Resolution: PR Submitted,Component: Modal

### Description

My issue is closely related to https://github.com/facebook/react-native/issues/47694. Initially I didn't see 2nd modal at all (in 0.76.3), but after updating to 0.76.5 at least 2nd Modal started appearing.

But what I noticed is that hiding animation shows artifacts of the previous render of a Modal if I render conditionally.

Possible "fix\hack" that I found for now is to render both Modals, but to control `visibility` property. This of course is a sub-optimal solution since no one wants to render all Modals.

Please check my videos and reproduction repository.

### Steps to reproduce

1. install app from the repo
2. Open `ModalContent.tsx`
3. Ensure that lines **are not commented out**
```
if (!visible) {
    return null;
  }
```
4. Run iOS. 
5. Open/Hide Modals multiple times. After the first time, you'll start seeing UI glitch when it renders a Modal from previous state during Hiding transition.

Possible fix:
1. disable lines with 
```
if (!visible) {
    return null;
  }
```
This will force rendering of `both` components, but visibility will be controlled by `visibility` property of the `Modal`.
2. Run iOS
3. Try opening/hiding Modal
4. Verify it hides/show properly without issues.

### React Native Version

0.76.5

### Affected Platforms

Runtime - iOS

### Output of `npx react-native info`

```text
System:
  OS: macOS 15.1.1
  CPU: (10) arm64 Apple M1 Pro
  Memory: 85.80 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.19.1
    path: ~/.nvm/versions/node/v18.19.1/bin/node
  Yarn: Not Found
  npm:
    version: 10.7.0
    path: ~/.nvm/versions/node/v18.19.1/bin/npm
  Watchman:
    version: 2024.01.22.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods: Not Found
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.1
      - iOS 18.1
      - macOS 15.1
      - tvOS 18.1
      - visionOS 2.1
      - watchOS 11.1
  Android SDK: Not Found
IDEs:
  Android Studio: 2024.2 AI-242.23339.11.2421.12550806
  Xcode:
    version: 16.1/16B40
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.10
    path: /usr/bin/javac
  Ruby:
    version: 2.7.8
    path: /opt/homebrew/opt/ruby@2.7/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 15.0.1
    wanted: 15.0.1
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.76.5
    wanted: 0.76.5
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true
```


### Stacktrace or Logs

```text
It's a UI bug
```


### Reproducer

https://github.com/vsheyanov/react-76-4-modal-bug/tree/main

### Screenshots and Videos

<table>
<tr>
<td><b>Not rendering a Modal based on a state</b></td>
<td><b>Hiding using visibility based on a state</b></td>
</tr>
<tr>
<td>
1st time - looks ok<br/>
2nd and 3rd - during <code>closing</code> animation you can see that it shows the previous state

https://github.com/user-attachments/assets/be4bc510-6a1e-40a1-af0d-8b0fc27f97e4
</td>
<td>
Looks as expected. Modals switch each other without any glitches.

https://github.com/user-attachments/assets/a1953523-b9bd-4f68-88c0-c0a5d6965f4d
</td>
</tr>
</table>