React checkbox show and hide card

I'm new in react and i'm trying to do a catalog with checkbox. I want to hide "x" card base on the checkbox selected and show all if none checkbox is checked. But i'm absolutly lost and don't have any idea about how i can do it.

I'm using react components, router-dom and Material UI for the checkbox.

So far this is the Checkbox component:

const CheckBox = () => {
const [checked, setChecked] = useState(
    listItems.map((i) => false)
);

const handleCheck = e => {
    setChecked(!checked)
    const result = e.target.value;
    checked === true ? handleCategory(result) : handleAllCategory();
}

const handleCategory = value => {
    const card = document.getElementsByClassName(value);
    const allCards = document.getElementsByClassName('container-card');

    for(let i = 0; i < allCards.length; i++){
        allCards[i].style.display = 'none'
    }

    for(let i = 0; i < card.length; i++){
        if(card[i].classList.contains(value)){
            card[i].style.display = 'block';
        }
    }
}

const handleAllCategory = () => {
    const allCards = document.getElementsByClassName('container-card');

    for(let i = 0; i < allCards.length; i++){
        allCards[i].style.display = 'block'
    }
}

return (
<>
    <Box sx=>
        <FormGroup >
            {listItems.map((item) => {
                return(
                    <FormControlLabel key={item.id} label={item.title} 
                        control={<Checkbox 
                            value={item.value}
                            onChange={(e) => handleCheck(e)}
                        />}
                    />
                )
            })}
        </FormGroup>
    </Box>
</>
)

}

This is the list of items i'm mapping:

const listItems = [
{
    id: 1,
    title: 'Todos los Productos',
    value: 'Todos',
},
{
    id: 2,
    title: 'Bateas Ultrasonido',
    value: 'Batea',
},
{
    id: 3,
    title: 'Diagnostico Directo',
    value: 'DiagnosticoDirecto',
},
{
    id: 4,
    title: 'Electrónica / Portones automáticos',
    value: 'Porton',
},
{
    id: 5,
    title: 'Escáneres',
    value: 'Escaner',
},
{
    id: 6,
    title: 'Escáneres Profesionales AUTEL',
    value: 'EscanerProfesional',
},
{
    id: 7,
    title: 'GNC',
    value: 'Gnc',
},
{
    id: 8,
    title: 'Proyectos Especiales',
    value: 'ProyectosEspeciales',
},
{
    id: 9,
    title: 'Tacómetro',
    value: 'Tacometro',
},
{
    id: 10,
    title: 'Testers',
    value: 'Testers',
},

]

And all of that should display, or not, this component:

const CardCatalogo = () => {
return (
<>
    <div className='card-section'>
        {CardAllItems.map(item => {
            return(
            <div className={`container-card ${item.type}`} key={item.id}>
                <div className="img-card">
                    <img src={require('../assets/' + item.image + '.png')} alt={item.title} />
                </div>
                <div className="info-card">
                    <h3 className="title-card">{item.title}</h3>
                    <p className="price-card">{'$' + item.price}</p>
                    <div className="buttons-card">
                        <button className="more-button">Info</button>
                        <button className="buy-button">Comprar</button>
                    </div>
                </div>
            </div>
            )
        })}       
    </div>
</>

) }

The object i use for the card is something like this:

{
    id: 1,
    image: 'diagnostico_directo/osciloscopio_automotriz',
    title: 'Osciloscopio Automotriz',
    price: '28.400,00',
    type: 'DiagnosticoDirecto',
},
{
    id: 2,
    image: 'diagnostico_directo/probador_mariposas_motorizadas',
    title: 'Probador Mariposas Motorizadas',
    price: '22.176,00',
    type: 'DiagnosticoDirecto',
},
{
    id: 3,
    image: 'diagnostico_directo/probador_motores_paso_a_paso',
    title: 'Probador de Motores Paso a Paso',
    price: '4.400,00',
    type: 'DiagnosticoDirecto',
},{
    id: 4,
    image: 'escaneres/escanes_autolink_629',
    title: 'Escaner Autolink 629',
    price: '35.213,00',
    type: 'Escaner',
},
{
    id: 5,
    image: 'escaneres_profesionales/maxiCheck_MX808',
    title: 'MaxiCheck MX808',
    price: '78.000,00',
    type: 'EscanerProfesional',
},
{
    id: 6,
    image: 'escaneres_profesionales/maxisys_Cv',
    title: 'Maxisys Cv',
    price: '496.000,00',
    type: 'EscanerProfesional',
},
{
    id: 7,
    image: 'escaneres_profesionales/maxiSys_MS906',
    title: 'MaxiSys MS906',
    price: '240.000,00',
    type: 'EscanerProfesional',
},

There are 64 items but all of them have the same keys.

The Checkbox component and the itemList are in the same file. The CardCatalogo is in a different file. In the function "handleCategory" and "handleAllCategory" i'm taking the class as reference an the value of the checkbox to compare. I know, it is an absolute mess, but i have no more ideas of what i should do. If someone wants to take a closer look this is my repo https://github.com/Alvaro0096/Fabianesi-page Both files and the one that contains the object for the card are in src/components...