Multiple filters in react (search bar & checkbox)

Hi I have a question about multiple filters in react. I have a search bar and checkbox filters and each on their own works great, but if I for example use two filters, only one works. I need them to work together. Does anyone have any idea how to do this?

This is my team.js:

const [genre, setGenre] = useState([]);
const [filteredGenre, setFilteredGenre] = useState([]);

    const handleChange = e => {
        if (e.target.checked) {
            setGenre([...genre, e.target.value]);
            return e;
        } else {
            setGenre(genre.filter(id => id !== e.target.value));
            return e;
        }
    };

    useEffect(() => {
        if (genre.length === 0) {
            setFilteredGenre(players);
        } else {
            setFilteredGenre(
                players.filter(position =>
                    genre.some(category => [position.position].flat().includes(category))
                )
            );
        }
    }, [genre]);


    const [value, setValue] = useState('');
    const handleSearch = (e) => {
        setValue(e.target.value)
    }
    const filteredEvent = players.filter(events => {
        return events.name.toLowerCase().includes(value.toLowerCase());
    });
   
    return (
        <>
            <SectionContent columns={2}>
                <Left>
                    <Filter
                        handleChange={handleSearch}
                        handlePositionChange={handleChange}
                    />
                </Left>
                <Right>
                    <Grid>
                        {filteredGenre.map(info => (
                            <Cards
                                key={info.id}
                                img={info.imgUrl}
                                alt={info.imgAlt}
                                numberInfo={info.number}
                                name={info.name}
                                position={info.position}
                                age={info.age}
                                nationality={info.nationality}
                                value={info.value}
                            />
                        ))}
                    </Grid>
                </Right>
            </SectionContent>
        </>
    );
};