Flatlist after creating a Scroll, to render correctly

Question

After 7 to 9 names, when creating a Scroll for viewing, Flatlist starts rendering a name only after another is inserted, and this only happens in tests on Android, the web is working normally.

GIF demonstrating such on Android:

GIF demonstrating such on the Web:

I tried to change the way the names are updated but the same thing kept happening.

Relevant Code:

const handleAdd = () => {
        if (nome != '') {
            data.push({nome: nome, nivelId: nivel, goleiro: isGoleiro, id: contador});
            updateData([...data]);
            updateNome('');
            updateContador(contador+1);
            updateNivel(0);
            setGoleiro(false);
            console.log(data)
        } else {
            alert("Por favor insira um nome");
        }
    }

    const handleRemove = (id) => {
        const novosNomes = data.filter(item => item.id !== id);
        updateData([...novosNomes])
    }
    

    const renderItem = ({item}) => {
        return (
          <NomeItemContainer>
              <Nome>
                  {item.nome}
              </Nome>
              <Infos>
                  <Nivel>
                      {item.nivelId}
                  </Nivel>
                  {
                    item.goleiro === true
                    ? <MaterialIcons name="pan-tool" size={28} color="white" style={{paddingRight: 5}}/>
                    : <Nome></Nome>
                  }
                  <MaterialIcons name="remove-circle" size={28} color="white" onPress={() => handleRemove(item.id)}/>
              </Infos>
          </NomeItemContainer>
        );
    }
    
    return (
        <Container>
            <Cabecalho>
                <TitlePage>{nNomeEsporte}</TitlePage>
                <InputNomes 
                    onChangeText={(text) => updateNome(text)}
                    value={nome}
                    placeholder="Digitar Nome"
                    placeholderTextColor="black"
                />
                <InfoAdd>
                    <TextoInfos>Nível técnico</TextoInfos>
                    <SliderContainer>
                        <NivelSlider 
                            thumbTintColor="white"
                            minimumValue={0}
                            maximumValue={5}
                            step={1}
                            value={nivel}
                            onValueChange={(nivel) => updateNivel(nivel)}
                        />
                        <NivelNumber>
                            {nivel}
                        </NivelNumber>
                    </SliderContainer>
                    {nNomeEsporte === 'Vôlei' 
                        ? <TextoInfos></TextoInfos> 
                        : <GoleiroInfo>
                            <TextoInfos>Goleiro</TextoInfos>
                            <Switch 
                                value={isGoleiro}
                                onValueChange={toggleSwitch}
                            />
                        </GoleiroInfo>
                    }
                </InfoAdd>
                <Botao onPress={handleAdd}>
                    <BotaoTexto>Adicionar</BotaoTexto>
                </Botao>
            </Cabecalho>
            
            <ListaNomes 
                data={data}
                keyExtractor={(item, index) => String(index)}
                renderItem={renderItem}
                extraData={data}
            />        
        </Container>
    );
}