I'm really struggling to figure out why i can't get my FlatList to render items the way that I would expect.

I'm using react-query in order to fetch a data array. I pass this array into my FlatList to be rendered, then I use a render function to render a list item. However my flat list completely ignores all of the item's padding and margin, sometimes.

Here's a snippet to better explain what I'm trying to do:

function Component() {
  data = [
    {a: true, otherStuff},
    {b: true, otherStuff}
  ]
  
  function renderItem({item, index}) {
    if (item.a) {
      return <ListItemA/>
    }
     if (item.b) {
       return <ListItemB/>
  }

render(
  <FlatList
    renderitem={renderItem}
    data={data}
  />
  )
}