Should not have to estimate frames when a measurement metrics function is provided

Question

I have a SectionList that scrolls vertically with a nested FlatList that scrolls horizontally and I am trying to optimise the performance. Reading the React-Native docs here they have suggested (if you have fixed heights or widths for items) to use getItemLayout.

However, when implementing this I am getting the above error.

CODE

const SEPARATOR_WIDTH = 10;
const CATEGORY_WIDTH = width / 5 + SEPARATOR_WIDTH;

<SectionList
  initialNumToRender={20}
  sections={sections}
  refreshControl={<RefreshControl />}
  refreshing={refreshing}
  onRefresh={() => fetchData()}
  renderSectionHeader={({ section }) => {
    const type = section.type;
    switch (type) {
      case "categories":
        return (
          <FlatList
            getItemLayout={(index) => ({
              length: CATEGORY_WIDTH,
              offset: CATEGORY_WIDTH * index,
              index,
            })}
            contentInset={{ right: 40 }}
            style={{
              marginBottom: 20,
              paddingHorizontal: 20,
            }}
            data={section.data}
            horizontal
            renderItem={({ item }) => (
              <CategoryCard
                item={item}
                onPress={() => categoryDetails(item)}
              />
            )}
            ItemSeparatorComponent={() => (
              <View style={{ width: 10 }} />
            )}
            showsHorizontalScrollIndicator={false}
            showsVerticalScrollIndicator={false}
          />
        );
      case "popular":
        return (
          <FlatList
            contentInset={{ right: 40 }}
            style={{ flex: 1, paddingHorizontal: 20, marginBottom: 20 }}
            data={section.data}
            horizontal
            renderItem={({ item }) => (
              <PopularVenueCard
                item={item}
                onPress={() => offerDetails(item)}
              />
            )}
            ItemSeparatorComponent={() => (
              <View style={{ width: 10 }} />
            )}
            showsHorizontalScrollIndicator={false}
          />
        );
      case "recent":
        return (
          <Text
            style={{
              fontSize: 21,
              fontWeight: "bold",
              paddingHorizontal: 20,
              marginBottom: 12,
            }}
          >
            {section.title}
          </Text>
        );
    }
  }}
  renderItem={({ item, section }) => {
    if (section.horizontal) {
      return null;
    }
    return (
      <RecentVenueCard item={item} onPress={() => offerDetails(item)} />
    );
  }}
  stickySectionHeadersEnabled={false}
  showsVerticalScrollIndicator={false}
/>