I use react-photoswipe-gallery to render some images for a portfolio page. Also I made a infinite scroll functionality so it only loads 10 items initially. Now it works based on button and adds 10 more items onClick, but I plan to change it to scroll. Everything works as intended until this point, this is how the gallery and inifinite scroll works:

    const loadLimit = 10;
    const [galleryItems, setGalleryItems] = useState(
        galleryData.slice(0, loadLimit)
    );
    const [visibleItems, setVisibleItems] = useState(loadLimit);
    const [selectedOption, setSelectedOption] = useState([]);

    const loadMore = () => {
        const newVisible = visibleItems + loadLimit;
        const newItems = galleryItems.concat(
            galleryData.slice(visibleItems, newVisible)
        );

        setVisibleItems(newVisible);
        setGalleryItems(newItems);
    };

Since there will be a lot of images, I'd like to also add a category filter using react-select with isMulti enabled. From what I've checked in console I target the right things, the category is set correctly. It only works when nothing is selected - by showing every image from any type of category. Once I select a category I need to click the Load more button and it shows every image available again, not by category.

    useEffect(() => {
        if (selectedOption.length === 0)
            return setGalleryItems(galleryData.slice(0, loadLimit));

        const filteredData = galleryData
            .filter((item) => item.category === selectedOption.value)
            .slice(0, loadLimit);

        setGalleryItems(filteredData);
    }, [galleryItems, selectedOption]);

    <Select
        components={makeAnimated()}
        options={filterOptions}
        value={selectedOption}
        onChange={setSelectedOption}
        placeholder="Filter by category"
        isMulti
    />

selectedOptions is a simple array with the category names.

galleryItems is an array of objects structured like this:

    {
        source: imageSource,
        category: 'category-name'
    }