React Native SectionList different data structure. Type FirstObject is not assignable to SecondObject

I'm using React Native SectionList with different data structure with the following below

const firstObject: FirstObject = [{    id: 1,    age: null,    breed: null,    gender: 'female',    isCastrated: false,    isCrossbreed: false,  },  ...]const secondObject: SecondObject = [{  id: 1,  text: "qwrqwr12r",  callDuration: 15,  callAt: "2022-12-22T11:09:07Z",  completionDeadline: "2022-12-24T11:09:07Z",  consultationFreeLength: 1,  },  ...]

It works but I got a typescript error that I can't figure out? And it seems it only allowed 1 typing for the section data. What I need is every data from the section must be different. For now we only have 2 and its default the FirstObject and SecondObject its not dynamic

    No overload matches this call.  Overload 1 of 2, '(props: SectionListProps<SecondObject, DefaultSectionT> | Readonly<SectionListProps<SecondObject, DefaultSectionT>>): SectionList<...>', gave the following error.    Type 'FC<ListRenderItemInfo<FirstObject>>' is not assignable to type 'SectionListRenderItem<SecondObject, DefaultSectionT>'.      Types of parameters 'props' and 'info' are incompatible.        Type 'SectionListRenderItemInfo<SecondObject, DefaultSectionT>' is not assignable to type 'ListRenderItemInfo<FirstObject>'.          Types of property 'item' are incompatible.            Type 'SecondObject' is missing the following properties from type 'FirstObject': userId, name, speciesId, speciesOther, and 9 more.  Overload 2 of 2, '(props: SectionListProps<SecondObject, DefaultSectionT>, context: any): SectionList<SecondObject, DefaultSectionT>', gave the following error.    Type 'FC<ListRenderItemInfo<FirstObject>>' is not assignable to type 'SectionListRenderItem<SecondObject, DefaultSectionT>'.ts(2769)

My section list

<SectionList    style={styles.container}    contentContainerStyle={styles.contentContainer}    ListEmptyComponent={<TranslatedNoData onClick={refetch} />}    scrollEventThrottle={16}    bouncesZoom={false}    maxToRenderPerBatch={8}    removeClippedSubviews    refreshControl={<FlatListRefreshControl refreshing={isFetching} onRefresh={refetch} />}    sections={[      {        data: [],        title: 'FirstObject',        keyExtractor: ({id}) => id.toString(),        renderItem: FirstObjectItem, // <- Error, If I removed the data below it works.        ItemSeparatorComponent: () => <Box pt="12px" />,      },      {        data: currentData?.data || [],        title: 'SecondObject',        keyExtractor: ({id}) => id.toString(),        renderItem: SecondObjectItem,        ItemSeparatorComponent: () => <Box pt="12px" />,      },    ]}    renderSectionFooter={() => <Box h="32px" />}    renderSectionHeader={({section: {title}}) => <Text>{title}</Text>}    onScroll={      scrollOffsetY &&      Animated.event([{nativeEvent: {contentOffset: {y: scrollOffsetY}}}], {useNativeDriver: false})    }  />

My two components

const FirstObjectItem: FC<ListRenderItemInfo<FirstObject>> = ({item}) => {   ...});const SecondObjectItem: FC<ListRenderItemInfo<SecondObject>> = ({item}) => {   ....});