Flatlist overlaying items when rendering more than 10 items

Question

I’m having trouble implementing a FlatList in my application, whenever it renders more than 10 items they overlap as if they were with

position: absolute;
top: 0;

and no matter the size of the rendered items, even if they do not occupy the entire screen if it passes 10 items they are superimposed

//FlatList
export const List = styled.FlatList.attrs({
 contentContainerStyle: {
   paddingHorizontal: 20,
   paddingBottom: 84,
 },
})`
 margin-top: 20px;
`;

<List
 keyboardShouldPersistTaps="handled"
 data={events}
 keyExtractor={item => String(item.id)}
 renderItem={({item}) => <EventsComponent data={item} />}
/>

//Componente Evento

<Container>
 <RowContainer>
   <ColumnContainer>
     <Name>{data.name}</Name>
     <RowContainer alignItens={'flex-end'}>
       <TinyName>{data.disciplina} - </TinyName>
       <TinyName>{formatDateBR(getStringDate(data.date))}</TinyName>
     </RowContainer>
   </ColumnContainer>
   <ButtonsContainer>
     <AddMissButton onPress={() => {}}>
       <Icon name={'delete'} size={24} color="#fff" />
     </AddMissButton>
   </ButtonsContainer>
 </RowContainer>
</Container>

//Estilização do Container externodo componente evento

export const Container = styled.View`
 flex: 1;
 border-radius: 4px;
 background-color: #fff;
 margin-bottom: 15px;
 padding: 4px;
 min-height: 80px;
 shadowColor: #000;
 shadowOffset: { width: 0, height: 2 };
 shadowOpacity: 0.8;
 shadowRadius: 2;
 elevation: 2;
`;

After rendering more than 10 items each Flatlist item is only with 15px difference from above, which is the margin-bottom: 15px applied in the container