React native pass component as props to another component, but taking config props from another place, something like FlatList

Title description may be confusing, so this is what I need,I have a Carousel component, it is a 'dynamic wrapper', this Carousel component will take 'data' and 'renderItem', something like FlatListThen inside Carousel component, in the render part, it should be able to do 'renderItem' with the 'data' props

Below are my sample:Carousel component:

import CarouselInternal from './carouselInternal'interface Props {  data: any  renderItem: JSX.Element  errorState?: Error  useTranslationsType?: string  onReload?: () => void  loading: boolean | false}export type CarouselProps = Props & StyledComponentProps@styled('Carousel')export class Carousel extends React.Component<CarouselProps> {  public render(): React.ReactElement<ViewProps> {    const { eva, ...props } = this.props    return <CarouselInternal {...eva?.style} {...props} />  }}

then next step is, in the CarouselInternal will take 'data''renderItem' as props to render

interface CarouselProps {  style?: StyleProp<ViewStyle>  data: []  renderItem: () => JSX.Element  errorState?: Error  useTranslationsType?: string  onReload?: () => void  loading: boolean | false  titleFontSize?: number  subTitleFontSize?: number  boxHeight?: number  carouselBorderColor?: string}const CarouselInternal = ({  style,  data,  renderItem,  errorState,  useTranslationsType,  onReload,  loading,  titleFontSize,  subTitleFontSize,  boxHeight,  carouselBorderColor,}: CarouselProps): JSX.Element => {  const [selectedIndex, setSelectedIndex] = useState(0)  const reloadProps = {    data,    renderItem,    errorState,    useTranslationsType,    onReload,    loading,    boxHeight,    carouselBorderColor,  }  return (<ViewPager      selectedIndex={selectedIndex}      onSelect={(index) => setSelectedIndex(index)}>      {data?.length ? (//Below is the core part what I am trying to achieve //pass the 'data' to renderItem,  also pass down some props carried from Carousel component        data?.map((item, index) => (<Layout>            {<renderItem          key={item.dateTime}          testID={`expanded-card-transactions-${index}`}          title={getTransactionTitle(item)}          subtitle={item.category ? item.category : t('General')}          amount={item.amount.value}          currency={item.amount.currency}          titleFontSize={titleFontSize}          subTitleFontSize={subTitleFontSize}        /> }</Layout>        )      ) </ViewPager>  )}

Then the 'renderItem' component should be render base on whatever parent carousel component passed down:

interface Props {  title?: string  subtitle?: string  testID?: string  onPress?: () => void  titleFontSize?: number  subTitleFontSize?: number}export const TransactionCarouselItem = ({  title,  subtitle,  testID = 'expanded-card-notification',  onPress,  titleFontSize,  subTitleFontSize,}: Props): JSX.Element => {  console.log('inside test dynamic carousel render', title);  return (<TouchableOpacity      style={[globalStyles.container, globalStyles.row, globalStyles.center]}      onPress={onPress}><MenuItem        accessoryLeft={(props) => <Icon {...props} name='alert-circle-outline' />}      /><Layout style={globalStyles.marginHorizontalSmall}>        {!!title && (<Text            numberOfLines={1}            ellipsizeMode='tail'            style={[{ fontSize: titleFontSize }, globalStyles.marginHorizontalSmall]}            testID={`${testID}-title`}>            {title.length > 7 ? title.substring(0, 10) +'...' : title}</Text>        )}        {!!subtitle && (<Text            numberOfLines={1}            ellipsizeMode='tail'            style={[              globalStyles.marginHorizontalSmall,              styles.transactionSubtitle,              { fontSize: subTitleFontSize },            ]}            testID='expandedCardTransaction-subtitle'>            {subtitle.length > 7 ? subtitle.substring(0, 10) +'...' : subtitle}</Text>        )}</Layout></TouchableOpacity>  )}export default TransactionCarouselItem

Then if all above hook up successfully, the usage sample as follow:

export function RecentTransaction(): JSX.Element {  return (<Layout style={styles.layout}>//So I should be able to pass in any type 'renderItem' component like below, then Carousel will render it<Carousel        data={getRecentTransactions()}        renderItem={(props) => <TransactionCarouselItem props={...props} />}        useTranslationsType='RecentTransaction'        loading={false}      /></Layout>  )}

So that's the idea, above code just sample, and I cannot get it working, please suggest with some sample code. Thanks