Repository: react-native
Issue: [iOS/iPadOS] - `FlatList` refresh handling broken/dysfunctional
Labels: Platform: iOS,Issue: Author Provided Repro,Component: FlatList,Type: New Architecture

### Description

### Description

Since upgrading to the new architecture it seems like the refresh/pull-to-refresh feature of the `FlatList` is broken/not fully functional any longer. However, this is only the case if you place another `FlatList` OR `ScrollView` in the same view. Placing just a list in each view does not lead to problems.

Pulling down and refreshing works twice before being dysfunctional. Eventually, after a certain pattern, the functionality works again twice and then breaks again.

The sample code provided below works as intended on the old architecture.

### Version

0.71.3

### Output of `npx react-native info`

Not relevant for this issue.

### Steps to reproduce

1. Create a new `react-native` project with the help of the CLI, install all dependencies and pods and build the application on a iOS/iPadOS device.
2. Paste the provided code into the `App.tsx` file
3. Pull down the list and notice how the loading spinner is displayed for a brief time
4. Use the `Switch` button to unmount the current view and mount another one containing two `FlatList` components and a `ScrollView` (for demonstration purposes).
5. Pull to refresh on the most left `FlatList`  (orange one) and once again use the `Switch` button
6.  Pull down the initial list and notice how the loading spinner is NOT displayed and the `onRefresh` handler is not called

### Snack, code example, screenshot, or link to a repository

https://github.com/coolersham/NRNA-flatlist-reload-bug

```
import React, { useState } from "react"

import {
  FlatList,
  ScrollView,
  Text,
  TouchableOpacity,
  View,
} from "react-native"

export default function App(): JSX.Element {
  return (
    <View
      style={{
        flex: 1,
        padding: 48,
        alignItems: "center",
        backgroundColor: "white",
      }}
    >
      <ListDemo />
    </View>
  )
}

function ListDemo() {
  const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  const [show, setShow] = useState(true)

  const style = { backgroundColor: "orange" }

  const switchButton = (
    <TouchableOpacity
      style={{
        height: 48,
        width: 300,
        alignItems: "center",
        backgroundColor: "red",
        justifyContent: "center",
      }}
      onPress={() => setShow((show) => !show)}
    >
      <Text style={{ color: "white" }}>Switch</Text>
    </TouchableOpacity>
  )

  if (show)
    return (
      <>
        {switchButton}
        <FlatList
          data={data}
          style={style}
          refreshing={false}
          renderItem={GenericListItem}
          onRefresh={() => console.log("List #1 refresh is called")}
        />
      </>
    )

  return (
    <>
      {switchButton}
      <View
        style={{
          flex: 1,
          flexDirection: "row",
        }}
      >
        <FlatList
          data={data}
          style={style}
          refreshing={false}
          renderItem={GenericListItem}
          onRefresh={() => console.log("List #2 refresh is called")}
        />

        {/* Breaks refresh handling of both lists occasionally */}
        <FlatList
          data={data}
          renderItem={GenericListItem}
          style={{ backgroundColor: "purple" }}
        />

        {/* The same applies to the normal ScrollView component */}
        <ScrollView style={{ backgroundColor: "blue" }}>
          {data.map((item) => (
            <GenericListItem key={item} />
          ))}
        </ScrollView>
      </View>
    </>
  )
}

function GenericListItem() {
  return (
    <View style={{ width: 300, height: 48 }}>
      <Text>Generic test item</Text>
    </View>
  )
}
```