FlatList inside useMemo, initalNumToRender issue

Question

I have a FlatList inside useMemo as follows

    const content = useMemo<JSX.Element>(
        () =>
            isLoading ? (
                <Loader />
            ) : !alerts.length ? (
                <View style={styles.noAlertsContainer}>
                    <NoAlertsIcon width={scaleHeight(182)} height={scaleHeight(201)} />
                    <Text numberOfLines={1} adjustsFontSizeToFit style={styles.noAlertsText}>
                        {i18n.t('alerts-empty')}
                    </Text>
                </View>
            ) : (
                <FlatList
                    initialNumToRender={9}
                    getItemLayout={getItemLayout}
                    bounces={false}
                    data={alerts}
                    keyExtractor={it => it.id}
                    renderItem={renderItem}
                />
            ),
        [isLoading]
    )
    return (
        <Fragment>
            <Header title={i18n.t('drawer-alerts')} onBackPress={navBack} renderEndElement={headerEndElement} />
            <View style={styles.divider} />
            {content}
        </Fragment>
    )

The issue is that after adding the initalNumToRender prop, only that number of items rendered (scrolling down won't render more items, will just have blank space accords the number of supposed items). Removing it, either taking this content block directly to the return part (without useMemo) fix the issue. Any idea about the best thing to do? don't want to let go of useMemo or initalNumToRender...

What I found really weird as well, is according to the docs, InitalNumToRender default is 10, but not specifying this prop won't cause the list to stack at 10 items

Thanks in advance!