Shopify Flashlist items load on top of each other initially

I have recently migrated from using Flatlist to shopify Flashlist in React Native.

I have a big list to render (a few hundred items with images in each), and I am running into a bug where in the loading stage, the items are rendering on top of each other, so for a few seconds during the initial loading, all the items in my list are rendering at the top of the screen. After that, the list stabilizes and I can scroll normally and with no issues.

Here is my code

<View
      style={{
        flex: 1,
        alignItems: "center",
      }}
    >
      <Header />
      <View
        style={{
          height: Dimensions.get("screen").height - 120,
          width: Dimensions.get("screen").width * 0.9,
        }}
      >
          <FlashList
            estimatedItemSize={200}
            estimatedListSize={{
              height: Dimensions.get("screen").height,
              width: Dimensions.get("screen").width * 0.9,
            }}
            ref={ref}
            data={finalPosts}
            renderItem={renderItem}
            keyExtractor={(_, i) => i}
            refreshing={refreshing}
            showsVerticalScrollIndicator={false}
            refreshControl={
              <RefreshControl
                refreshing={refreshing}
                onRefresh={() => {
                  loadData();
                }}
              />
            }
          />
      </View>
    </View>

Why is it rendering all of the components at the start of the screen? My initial hypothesis is that it’s a styling issue, where because I set the height as Dimensions.height, the list is just looping around and rendering all items at the first position. I experimented a bit with those values but it did not help.
Would love to find a solution to this as Flashlist seems to be solving all of the performance issues I had with Flatlist (once all items are loaded). Thanks!