Repository: react-native
Issue: Unexpected scroll behaviors when using FlatList
Labels: Issue: Author Provided Repro,Component: FlatList,Needs: Triage :mag:,Newer Patch Available,Needs: Attention

# Description
Content teleports to right when over-scrolling, if the content is less.

## What I am trying to do? 🤔
Two `FlatList` components are nested inside a `ScrollView` for a custom component to emulate a grid like structure. 

Example:
```
_________
         |
         |
[] [] [] | [] []
[] [] [] | [] []
[] [] [] | [] []
[] [] [] | []
         |
         |
▔▔▔▔▔
```

`[]` represent grid items and `|` represents edge of the screen. The items are accessed by scrolling horizontally.

## How am I doing this? ❓
```jsx
export function HorizontalRowList({
    rows, data, renderItem,
    bounces = false,
    itemSeparatorComponent,
    style, columnStyle
}) {
    const columns = divideArrayIntoChunks(rows, data);
    return (
        <ScrollView style={{ ...style, overflow: "hidden" }}
            showsVerticalScrollIndicator={false}
            nestedScrollEnabled={true}
            alwaysBounceHorizontal={bounces}
            bounces={bounces}>
            <FlatList data={columns}
                style={{ borderColor: "blue", borderWidth: 1, overflow: "hidden" }}
                ItemSeparatorComponent={itemSeparatorComponent}
                nestedScrollEnabled={true}
                legacyImplementation={false}
                initialNumToRender={columns.length}
                horizontal={true}
                alwaysBounceHorizontal={bounces}
                bounces={bounces}
                renderItem={(column) => {
                    return <FlatList data={column.item}
                        style={columnStyle}
                        ItemSeparatorComponent={itemSeparatorComponent}
                        legacyImplementation={false}
                        bounces={bounces}
                        renderItem={({ item }) => {
                            return renderItem(item);
                        }} />
                }} />
        </ScrollView >
    )
}
```

```js
function divideArrayIntoChunks(chunkSize, array) {
    const chuckedArray = []
    for (let i = 0; i < array.length; i += chunkSize) {
        chuckedArray.push(array.slice(i, i + chunkSize))
    }
    return chuckedArray;
}
````

`ScrollView` to disable individual vertical scroll bars for the columns when the component has less space.
The first `FlatList` to enable horizontal behavior of grid
The second `FlatList` component are columns. The component can be given used to render list of varying sizes.

## When the bug occurs? 🪲
The bug happens when data is less and rows to render are more. This causes the array to be chunked in the following way:
```
[] []     |
[] []     |
[] []     |
[]        |
```



### Steps to reproduce

* Create a new project
* Add the code for `HorizontalRowList` component given in the description
* Import and add the component in App.js
* Create a random list of strings or any other object
* Pass this list to data attribute of `HorizontalRowList`
* Set the row attribute in such a way that there is considerable space to the right of the `HorizontalRowList`
* Try scrolling `HorizontalRowList` and observe the behavior 

### React Native Version

0.73.6

### Affected Platforms

Runtime - Android

### Output of `npx react-native info`

```text
System:
  OS: Windows 11 10.0.22631
  CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-1155G7 @ 2.50GHz
  Memory: 5.68 GB / 15.78 GB
Binaries:
  Node:
    version: 21.0.0
    path: C:\Program Files\nodejs\node.EXE
  Yarn: Not Found
  npm:
    version: 10.4.0
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
  Windows SDK: Not Found
IDEs:
  Android Studio: Not Found
  Visual Studio:
    - 17.8.34408.163 (Visual Studio Community 2022)
Languages:
  Java: Not Found
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.73.6
    wanted: ^0.73.6
  react-native-windows: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found
```


### Stacktrace or Logs

```text
No Errors
```


### Reproducer

Please check this snack

https://staging-snack.expo.dev/kawPQ53xi5xNUpxnPKYfB

### Screenshots and Videos

![ezgif-1-f9032ba6fe](https://github.com/facebook/react-native/assets/82939252/697e3d75-023f-4ad7-a266-22909e3a181d)