У меня есть Modal, из которого пользователь выбирает категории, а затем эта категория загружается в FlatList на странице их профиля. Когда выбрана первая категория, она правильно загружается с желаемым форматированием:

Когда пользователь выбирает и добавляет второй элемент из модального окна, элементы исчезают, например:

И когда добавляется третий элемент, появляется эта ошибка:

КОД:

Массив категорий, из которого выбирает пользователь, и состояния хука:

const [catData, setCatData] = React.useState([])
const [catsSelected, setCatsSelected] = React.useState([])

const categoryData=[
    {
        id: 1,
        name: "CatOne",
    },
    {
        id: 2,
        name: "CatTwo",
    },
    {
        id: 3,
        name: "CatThree",
    }]

Функция, которая вызывается, когда пользователь ВЫБИРАЕТ нужную ему категорию:

const onSelectCategory = (itemSelected, index) => {
        let newData = categories.map(item => {
            if (item.id === itemSelected.id) {
                return {
                    ...item,
                    selected: !item.selected
                }
            }
            return {
                ...item,
                selected: item.selected
            }
        })
        selectedData = newData.filter(item => item.selected === true)
        setCatData(selectedData)
    }
// Note, the above code is as such due to initially wanting the user to be able to select multiple categories at a time, however,
// I've decided that one category at a time would suffice, and I just modified the above function to fit that need (I will tidy it up later).

Функция вызывается, когда пользователь ПОДТВЕРЖДАЕТ выбранную категорию:

const catSave = () => {
        if (catData.length > 0){
            if (catsSelected.length < 1){
                setCatsSelected(catData)
            }
            else{
                testData = catsSelected
                testData = testData.push(catData[0])
                setCatsSelected(testData)
            }
        }
        setModalVisible(!modalVisible)
    }

И FlatList, в который загружаются выбранные категории:

<FlatList 
   data = {catsSelected}
   horizontal
   showsHorizontalScrollIndicator = {false}
   keyExtractor = {item => `${item.id}`}
   renderItem = {renderCats}
                                    
/>

Для справки, вот консольный лог CatsSelected по мере его изменения:

[] // when it is initialized
[{"id": 1, "name": "CatOne", "selected": true}] // first item added
[{"id": 1, "name": "CatOne", "selected": true}, {"id": 2, "name": "CatTwo", "selected": true}] // second item added, the FlatList is now invisible
// Error prompts after third item is added.

Мне нужно, чтобы FlatList не был невидимым, и чтобы эта ошибка не выдавала запрос после добавления третьего элемента, кто-нибудь уверен, почему это происходит?

Спасибо за помощь.