Почему в моем React Native FlatList есть ключи с одинаковым значением?

Я не всегда получаю это предупреждение о ключах с одинаковым значением, но часто. Чаще всего это происходит при первом поиске.

Вот мой код:

const ITEMS_PER_PAGE = 5 

export default class SearchForm extends Component {

    state = {
        allStates: [],
        states: [],
        page: 1,
        displayStatesList: false,
    }

    componentDidMount = async () => {
        await fetch('https://servicodados.ibge.gov.br/api/v1/localidades/estados', {
            method: 'GET',
            headers: {
                Accept: 'application/json',
                'Content-Type': 'application/json',
            },
        })
        .then(res => res.json())
        .then(res => this.setState({ allStates: res, states: res.slice(0, ITEMS_PER_PAGE -1) })) 
    }

    updateSearch = search => {
        let { allStates } = this.state
        this.setState({ 
            states: allStates.filter(res => res.nome.includes(search)),
            displayStatesList: true,
            search: search,
        })       
    }

    loadMore = () => {
        const { page, states, allStates, search } = this.state
        const start = page*ITEMS_PER_PAGE
        const end = (page+1)*ITEMS_PER_PAGE-1
        const newData = allStates.slice(start, end).filter(res => res.nome.includes(search))
        console.info(allStates.length)
        this.setState({
            states: [...states, ...newData],
            page: page + 1,
        })
    }

    selectItem = (nome) => {
        console.info('press', nome)
        this.setState({
            search: nome,
            displayStatesList: false,
        })
    }

    renderItem = ({ item }) => {
        return (
            <View>
                <ListItem
                    title = {item.nome}  
                    onPress = {() => this.selectItem(item.nome)}                  
                />
            </View>
        );
    }

    render() {

        const {
            search,
            states,
            displayStatesList,
        } = this.state

        return (
            <View style = {styles.container}>
                <SearchBar
                    placeholder = "Type Here..."
                    onChangeText = {this.updateSearch}
                    value = {search}
                    lightTheme
                />
                <View style = {styles.listContainer}>
                    {displayStatesList && <FlatList
                        data = {states}
                        keyExtractor = {item => item.id.toString()}
                        renderItem = {this.renderItem}
                        onEndReached = {this.loadMore}
                        onEndReachedThreshold = {0.7}
                    />}    
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignSelf: 'stretch',
        backgroundColor: '#fff',
    },
    listContainer: {
        height: 200
    },
})

Может быть, я делаю то, что не рекомендуется, и это вызывает ошибку? А может .slice не правильный?

Наблюдение: Если API не работает, могу выложить json файл для проверки.