Javascript 反应本机筛选器数据

我有一个BeautifulPlacesCards组件，用户可以在其中看到所有的地方，我想实现过滤功能：当用户按下复选框“Mountains”时，他只能看到带有Mountains类型的地方，当用户按下“Mountains”然后按下“Forest”时，他可以看到这两种类型的地方，依此类推。未按下所有复选框时，显示所有未过滤的位置

BeautifulPlacesCards组件：

这就是我如何设置从服务器获取的文件：

    const [data, setData] = useState([]);
    const [filteredData, setFilteredData] = useState(undefined);

在这里，我从服务器获取所有位置，并将它们设置为数据：

useEffect(() => {
        fetch('https://beautiful-places.ru/api/places')
            .then((response) => response.json())
            .then((json) => setData(json))
            .catch((error) => console.error(error))
    }, [])

这是一个旋转木马，我在其中检查过滤数据是否未定义，然后根据数据渲染所有位置：

 const renderItem = useCallback(({ item, index }: RenderItemProps) => {
        return (
    <TouchableWithoutFeedback onPress={() => onMarkerPress(item)}>
        <View>
            <Image {...{uri: item.images[0].image, preview}}
                style={{
                    backgroundColor: "floralwhite",
                    borderRadius: 5,
                    height: '80%',
                    width: width/1.4,
                }}
            />
        </View>
    </TouchableWithoutFeedback>
        );
    }, []);
    return (
        <View>
        <Header
            title="Карточки мест"
            left={{ icon: 'menu', onPress: () => navigation.openDrawer() }}
            right={{ icon: 'shopping-bag', onPress: () => true }}
        />
    <Categories filterDataFromChildren={filterDataFromChildren} />
        </View>
            <View style={{ marginTop: '10%', height: "80%", justifyContent: "center", alignSelf: "center",  alignItems: "center" }}>
                {data ? <Carousel
                    layout={"default"}
                    style={{ }}
                    ref={ref}
                    data={filteredData ? filteredData : data}
                    sliderWidth={width}
                    itemWidth={width/1.4}
                    renderItem={renderItem}
                    onSnapToItem={(index: number) => setActiveIndex(index)}
                /> : <AppLoading /> }

            </View>

因为我的复选框在子组件中，所以当按下复选框时，我使用道具发送此函数，以获取位置类型。这就像是回调

<Categories filterDataFromChildren={filterDataFromChildren} />

我的问题是，当我按下复选框时，我的当前位置消失，但实际应过滤位置的setFilterData变为空数组，并且在获取后数据中的位置也变为初始状态：空数组。请告诉我，在这种情况下，在获取数据后，我应该如何以及在哪里保存数据，或者您将如何实现此功能，因为我不知道如何以正确的方式执行此功能

<Categories filterDataFromChildren={filterDataFromChildren} />