last FlatList content only display 10% of the item

here i use flatlist grid inside scrollview, the problem is the last row of the grid didn't display the full height of the content, i don't know where the problem is.

note: i use native-base component

 const [data, setData] = useState([
    { id: 1, title: "DA’s Backyard" },
    { id: 2, title: "KC’s Backyard" },
    { id: 3, title: "LA’s Backyard" },
    { id: 4, title: "KP’s Backyard" },
    { id: 5, title: "LA’s Backyard" },
    { id: 6, title: "KP’s Backyard" },
  ]);

 <ScrollView
  showsVerticalScrollIndicator={false}
  contentContainerStyle={{ width: "100%", alignItems: "center" }}
>
  <Stack flexWrap={"wrap"} justifyContent="center">
    <SelectBox />
    <FlatList
      mt={"4"}
      showsVerticalScrollIndicator={false}
      data={data}
      keyExtractor={(item, index) => index}
      numColumns={2}
      renderItem={(data, index) => {
        return <PortfolioCard />;
      }}
    />
  </Stack>
</ScrollView>