SectionList ref.scrollToLocation wrong location - react-native

Question

while running scrollToLocation passing the correct values the scroll goes random and not in the desired position.
in the video you can see the indexes that I pass in the input.
I am hoping for an answer because it all seems correct to me.
with regard
gif:
https://i.imgur.com/EPw9AKm.gif
//#ts-ignore
const onFocus = (item, sectionIndex, itemIndex) => {
// console.log({ item, sectionIndex, itemIndex})
// setCurrentIndex(index);
onScrollToItemSelected(sectionIndex, itemIndex);
};
const onScrollToItemSelected = (sectionIndex: number, itemIndex: number) => {
console.log("onScrollToItemSelected::::", { sectionIndex, itemIndex });
// console.log("onScrollToItemSelected::refSectionList", refSectionList.scrollToLocation)
//#ts-ignore
refSectionList.scrollToLocation({
animated: true,
sectionIndex: sectionIndex,
itemIndex: itemIndex,
viewPosition: 0,
});
};
<SectionList
contentContainerStyle={{ paddingBottom: 300 }}
ref={(ref: any) => setRefSectionList(ref)}
keyExtractor={(item, index) => `sectionList-${index}`}
style={{ margin: 8, backgroundColor: "grey" }}
sections={entities}
getItemLayout={getItemLayout}
renderItem={(data) => {
const { index, item, section } = data;
const sectionIndex = section.sectionIndex;
//#ts-ignore
const { lists } = item || {};
if (!lists) return null;
return lists.map((item: any, idx: number) => {
console.log("section:::", section.sectionIndex);
return (
<ItemSection
key={`ItemSection-${sectionIndex}-${idx}`}
item={item}
index={idx}
onFocus={onFocus}
currentIndex={currentIndex}
{...section}
/>
);
});
}}
renderSectionHeader={({ section: { title, sectionIndex } }) => {
return (
<Text
style={{
color: "white",
padding: 8,
borderWidth: 1,
borderColor: "yellow",
backgroundColor: "black",
}}
>
Header {sectionIndex}
</Text>
);
}}
{...props}
/> ```