How to change react state value in map?

Well, I made a list using the code below and I want the desired item to change color after changing it. This code actually has filters for products that by selecting each filter, the word 'selected' is inserted under its title.

import React from 'react'
export default function(){
 const [categoryfilter,setcategoryfilter]=React.useState("");
 const [productfilter,setproductfilter]=React.useState({
  st1:"",
  st2:"",
  st3:""
});
 const [acceptstates,setAccepstates]=React.useState({
    category:false,
    product:false,
  });
  const [selectstates,setSelectstates]=React.useState({
    category:true,
    product:false,
  });
  const selectStateFilter=(prop)=>{
    setSelectstates({category:false,product:false});          
     if(prop=="category"){setSelectstates({category:true});}

      if(prop=="product"){setSelectstates({product:true});
      

  }
 const handleRadio=(e)=>{
      setcategoryfilter(e.target.value);
  }
  const handleCheckbox=(props)=>(e)=>{
    if(e.target.checked===true){
      setproductfilter({...productfilter,[props]:e.target.value});
      setAccepstates({product:true});
      console.log(acceptstates.product)
    }else{
      setproductfilter({...productfilter,[props]:""});
    }
  }
}
return (
    <div>
      <div  className='row row-cols-2 p-0'>
      <ul className=" col-4 list-group" style={{borderRadius:"0px"}}>
        {filtermenu.map((item,idx)=>(
          <li className="list-group-item list-group-item-action" onClick={(e)=>{selectStateFilter(item.id)}}>
          <div className=' row row-cols-2'>
              <div className='col-10'>
              <p>{item.name}</p>
              {accept===true ? <small>selected</small> :<div></div>}
              
            </div>
            <div className='col-2 p-2'>
              <KeyboardArrowLeftIcon/>
            </div>
          </div>
            
      </li>
        ))}
      </ul>
       <div className='col-8'>
        {selectstates.category && <div className='card-body'>
            <div className='row row-cols-2'>
              <h3 className='card-title col-9 text-start'>category</h3>
            </div>
            <div className='pt-5' style={{width:"450px"}} dir="rtl">
            <FormControl>
              <RadioGroup
                aria-labelledby="demo-radio-buttons-group-label"
                defaultValue="c1"
                name="radio-buttons-group"
                
               >
                <FormControlLabel value="c1" onChange={handleRadio} checked={categoryfilter==='c1'}  control={<Radio />} label="mobile" />
                <FormControlLabel value="c2" onChange={handleRadio} checked={categoryfilter==='c2'} control={<Radio />} label="computers" />
                <FormControlLabel value="c3" onChange={handleRadio} checked={categoryfilter==='c3'} control={<Radio />} label="laptops" />
              </RadioGroup>
            </FormControl>
            </div>
        </div>}
        {selectstates.product &&  <div className='card-body'>
            <div className='row row-cols-2'>
              <h3 className='card-title col-9 text-start'> product state</h3>
            
            </div>
            <div className='pt-5 ps-2' style={{width:"450px"}} dir="rtl">
              <div className='row col-12'>
              <FormGroup>
                <FormControlLabel control={<Checkbox onChange={handleCheckbox('st1')} checked={productfilter.st1==="access"} value="access" />} label="access" />
                <FormControlLabel control={<Checkbox onChange={handleCheckbox('st2')} checked={productfilter.st2==="no access"} value="no access"/>} label="no access" />
                <FormControlLabel control={<Checkbox onChange={handleCheckbox('st3')} checked={productfilter.st3==="ignored"} value="ignored" />} label="accepted" />

              </FormGroup>
             
               </div>
            </div>
        </div>}
        </div>
   </div>
    </div>

While this does not happen and the changes are not applied. How to change the 'acceptsates' state value in the map list?