For some reason my Flatlist first renders and then Scrolls to the initalScrollIndex
I recorded it and it looks like this and if you watch it carefully

Frame 1

Frame 2

Code:

const Am_pm_DATA=[{ key: 0, title: '' }, { key: 1, title: 'am' }, { key: 2, title: 'pm' }, { key: 3, title: '' }];

const [FromAmPm, setFromAmPm] = useState(() => 1);

const ItemComp = ({ item }) => (
  <View
    style={...}>
    <Text style={...}>{item.title}</Text>
  </View>
)

return(<>  
         <FlatList
            initialScrollIndex={FromAmPm}
            data={Am_pm_DATA}
            renderItem={ItemComp}
            keyExtractor={(_, index) => index.toString()}
            getItemLayout={(_, index) => {
                return { length: CustomStyle.height, offset: CustomStyle.height * index, index };
            }}
            showsVerticalScrollIndicator={false}
            snapToOffsets={Am_pm_DATA.map((x, i) => (i * CustomStyle.height))}
        />
        <View style={...} pointerEvents="none"></View>
</>);

how do I make the flatlist render already at the initalScrollIndex position ?
I tried this but it doesn't seem to help