как реализовать функционал фильтрации с chekbox на реакте?

Я делаю сайт где нужен такой фильтр:

Начал я вот так

import React from 'react'
import Container from 'components/Container'
import { useSearchProductsQuery } from 'app/services/Products'
import ProductCard from 'components/ProductCard'
import { useSearchParams } from 'react-router-dom'
import { Search as Magnifier } from 'react-feather'
import SearchFilter from 'components/SearchFilter'
import SearchFilterSideBar from 'components/SearchFilterSideBar'
import { useMediaQuery, useTheme } from '@mui/material'

export default function Search() {
  const theme = useTheme()
  const isTablet = useMediaQuery(theme.breakpoints.down('md'))
  const ref = React.useRef(null)
  let [searchParams, setSearchParams] = useSearchParams()
  const filters = React.useMemo(() => {
    let obj = {
      page: searchParams.get('page') || 0,
      size: searchParams.get('size') || 16,
      query: searchParams.get('query'),
      category: searchParams.get('category'),
      brand: searchParams.get('brand'),
      promo: searchParams.get('promo'),
      min: searchParams.get('min') || 0,
      max: searchParams.get('max') || 10000000,
      sorted: searchParams.get('sorted'),
      state: searchParams.get('state'),
    }
    for (const [key, value] of Object.entries(obj)) {
      if (value === null || value === undefined) delete obj[key]
    }
    return obj
  }, [searchParams])
  const updateFilter = (key, value) => {
    if (value) searchParams.set(key, value)
    else searchParams.delete(key)
    setSearchParams(searchParams)
  }

  const { data } = useSearchProductsQuery(filters)

  // number | next (data?.number + 1) | previous (data?.number - 1)
  const setPage = page => updateFilter('page', page)
  const setSize = size => updateFilter('size', size)
  const setQuery = () => updateFilter('query', ref?.current?.value)
  // category id | null for default
  const setCategory = category => updateFilter('category', category)
  // brand id | null for default
  const setBrand = brand => updateFilter('brand', brand)
  // promo id | null for default
  const setPromo = promo => updateFilter('promo', promo)
  // number (0+) | null for default
  const setMin = min => updateFilter('min', min)
  // number | null for default
  const setMax = max => updateFilter('max', max)
  // price_asc | price_desc | date_asc | date_desc | null for default
  const setSorted = sorted => updateFilter('sorted', sorted)
  // Б/У | Хорошее | Новое, с биркой | null for default
  const setState = state => updateFilter('state', state)

  return (
    <Container className="py-4">
      <div className="mb-4 flex flex-col-reverse sm:grid sm:grid-cols-[2fr_1fr] sm:gap-4">
        <h6 className="h-full py-2">
          {filters.query &&
            `По запросу "${filters.query}" найдено ${
              data?.totalElements ?? 0
            } результата.`}
        </h6>
        <div className="input-group sm:relative flex flex-row items-stretch w-full border rounded-md">
          <input
            ref={ref}
            type="search"
            onChange={e => !e.target.value && setQuery()}
            onKeyPress={e => e.key === 'Enter' && setQuery()}
            className="relative flex-auto min-w-0 block w-full pl-4 pr-1 py-2 text-base font-normal text-gray-700 bg-white bg-clip-padding  rounded transition ease-in-out m-0 outline-none border-0"
            placeholder="Поиск по названию..."
          />
          <span className="input-group-text flex items-center pr-2 py-2 text-base font-normal text-gray-700 text-center whitespace-nowrap rounded">
            <Magnifier
              onClick={setQuery}
              className="h-5 stroke-zinc-300 hover:stroke-slate-900 cursor-pointer"
            />
          </span>
        </div>
      </div>
      <div style={{ margin: '10px 0' }}>
        {isTablet ? <SearchFilter /> : null}
      </div>
      <div className="w-full block sm:grid grid-cols-[1fr_3fr] gap-x-4 xl:gap-x-8">
        <div className="hidden rounded-md border p-4 sm:block ">
          <div>{isTablet ? null : <SearchFilterSideBar />} </div>
        </div>
        <div className="grid grid-cols-2 gap-y-5 gap-x-2 sm:gap-y-10 sm:gap-x-4 lg:grid-cols-3 xl:grid-cols-4">
          {React.Children.toArray(
            data?.content.map(product => <ProductCard product={product} />),
          )}
        </div>
      </div>
    </Container>
  )
}

Вот мой продукт

0: {id: 382, title: "Платье с поясом",…}
brand: 20
cartQuantity: 1
category: 131
createdDate: "2022-05-04T21:59:06.836+00:00"
description: "Короткое платье из хлопковой ткани с круглой горловиной и глубоким вырезом спереди с потайной застежкой на крючок и пуговицу сверху. Плавно заниженная линия плеча длинный широкий рукав с узким манжетом на пуговице отрезная талия с длинным завязывающимся поясом а также летящая юбка клеш."
id: 382
pictures: ["https://beta.thebrands.vip/api/v1/pictures/img_8fbbd6ba16c84256b32538859c7d8a95.jpg",…]
remainingEditTime: -6358440
sizes: [,…]
0: {id: 390, productId: 382, sizeId: 388, sizeLabel: "37", sizeTypeLabel: "Европеский", priceId: 389,…}
discount: 71
id: 390
price: 100
priceId: 389
productId: 382
sizeId: 388
sizeLabel: "37"
sizeTypeLabel: "Европеский"
status: "APPROVED"
title: "Платье с поясом"
user: 6

Ui файл фильтрации

import React from 'react'
import Box from '@mui/material/Box';
import Drawer from '@mui/material/Drawer';
import List from '@mui/material/List';
import Divider from '@mui/material/Divider';
import ListItem from '@mui/material/ListItem';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemText from '@mui/material/ListItemText';
import Typography from "@mui/material/Typography";
import { Slider } from '@mui/material';
import FormGroup from '@mui/material/FormGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';
import {useMediaQuery,useTheme,} from '@mui/material'
import Button from './Button';
import { useState } from 'react';



const SearchFilterSideBar = () => {
    const [value, setValue] = React.useState([100, 37]);
    const theme = useTheme();
    const [color,setColor] = useState('black')
    const isSmall = useMediaQuery(theme.breakpoints.down("sm"));
    const handleChange = (event, newValue) => {
      setValue(newValue);
    };

  
   

  return (
    
   <Box
      sx={{ width:'280px', padding:'20px 10px 10px 10px' }}
    >
      <Typography align="center" variant="h5" marginTop="50px" color="black">
        Price
      </Typography>
      <Box
      sx={{
        padding: "10px 20px 0px 20px",
        display: "flex",
        flexDirection: "row",
        justifyContent: "center",
      }}
      >
    <Slider
  getAriaLabel={() => 'Price range'}
  value={value}
  onChange={handleChange}
  valueLabelDisplay="auto"
  min={10}
  max={500}
  
  />

      </Box>
      <Box
        sx={{
          padding: "0px 20px",
          display: "flex",
          flexDirection: "row",
          justifyContent: "space-between",
        }}
      >
        <h5>10$</h5>
        <h5>500$</h5>
      </Box>
      <List>
      <Typography align="center" variant="h5" color="black" sx={{ paddingTop: (theme) => theme.spacing(3) }}>
        Категория
      </Typography>
        {['Для него', 'Для нее', 'Для детей'].map((text, index) => (
          <ListItem key={text} disablePadding>
            <ListItemButton>
              <FormGroup>
                 <FormControlLabel control={<Checkbox defaultChecked />} />
            </FormGroup>
              <ListItemText primary={text} />
            </ListItemButton>
          </ListItem>
        ))}
      </List>
      <Divider />
      <List>
      <Typography align="center" variant="h5" color="black" sx={{ paddingTop: (theme) => theme.spacing(3) }}>
        Бренд
      </Typography>
        {['Lacoste', 'Bigser', 'Guggi','Nike'].map((text, index) => (
          <ListItem key={text} disablePadding>
            <ListItemButton>
                <FormGroup>
      <FormControlLabel control={<Checkbox defaultChecked />} />
     </FormGroup>
            
              <ListItemText primary={text} />
            </ListItemButton>
          </ListItem>
        ))}
      </List>
      <Divider />
      <List>
      <Typography align="center" variant="h5" color="black" sx={{ paddingTop: (theme) => theme.spacing(3) }}>
        Сортировать по
      </Typography>
        {['Дате', 'Цене'].map((text, index) => (
          <ListItem key={text} disablePadding>
            <ListItemButton>
                <FormGroup>
      <FormControlLabel control={<Checkbox defaultChecked />} />
    </FormGroup>
              <ListItemText primary={text} />
            </ListItemButton>
          </ListItem>
        ))}
      </List>
      <Box
        sx={{
          display: "flex",
          flexDirection: "row",
          justifyContent: "center",
        }}
      >
        
          <Button
            title={'Применить'}
          />
            
      </Box>
    </Box>


  )
}

export default SearchFilterSideBar

И что я должен делать дальше