React Native Flatlist how to show 2 rows as a single column

Question

I have a flat list with 2 columns. What I want to achieve is if the item is at number 1, it should contain the height of 2 items. I am able to achieve this but the problem is that the 3rd item in the list doesn't fit its place and goes under the 1st column. But it should be under the 2nd column. Its place under the 2nd column remains empty

const renderItem = ({item}) => {
    if (item === 1) {
      return (
        <View
          style={{height: 200, width: 150, backgroundColor: 'red', margin: 5}}>
          <Text>ABC</Text>
        </View>
      );
    }
    return (
      <View
        style={{height: 100, width: 150, backgroundColor: 'red', margin: 5}}>
        <Text>ABC</Text>
      </View>
    );
};