Hay algunos problemas en su componente funcional.

1. Agregue las dependencias correctas en useEffect hook.

 useEffect(() => { setCat(category); }, []); // category should be added as a dependecies useEffect(() => { setCat(category); }, [category]);

Pero definiste categoría como una constante. Entonces, en realidad, su código no tiene sentido y el siguiente código es correcto en su caso.

 const category = [{ name: "beaf" }, { name: "chicken" }, { name: "vegetables" }]; const [cat, setCat] = useState(category); // Should be removed. /*useEffect(() => { setCat(category); }, []);*/

2. use el gancho setState correctamente.

Está cambiando el valor del estado de las norms en función de su valor anterior.

 const handleChangeC = (e) => { const { name, checked } = e.target; let tempC = norms.map((c) => c.name === name ? { ...c, isChecked: checked } : c ); setNorms(tempC); };

En este caso, debe usar el estado anterior de la siguiente manera.

 const handleChangeC = (e) => { const { name, checked } = e.target; setNorms(prevNorms => (prevNorms.map((c) => c.name === name ? { ...c, isChecked: checked } : c)); };

Hubo algunos problemas con su código. Este código funciona en el mío a menos que quieras hacerlo de otra manera. Su lógica parece estar bien, pero solo la forma de implementarla.

• Importar dependencias requeridas
• Use el estado para restablecer el valor del estado

 function Filters() { const category = [ { name: 'beaf' }, { name: 'chicken' }, { name: 'vegetables' }, ]; const [cat, setCat] = useState([]); useEffect(() => { setCat(category); }, []); const handleChangeR = (e) => { const { name, checked } = e.target; const tempC = cat.map((c) => (c.name === name ? { ...c, isChecked: checked } : c)); setCat(tempC); }; return ( <div className="flex flex-col "> <div className="mt-3 h-6 text-xs font-bold uppercase leading-8 text-gray-500"> Filters </div> <form className="mx-2 w-full flex-1"> <tbody className=" bg-white my-2 p-1 flex borer border-gray-200 rounded text-gray-500"> {cat.map((e, index) => ( <div className="form-check mx-2" key={index}> <tr> <td> <input type="checkbox" className="form-check-input" name={e.name} checked={e?.isChecked || false} onChange={handleChangeR} /> <label>{e.name}</label> </td> </tr> </div> ))} </tbody> </form> </div> ); }