Así que tengo estos conjuntos de casillas de verificación para 3 categorías diferentes. 1 es "tipos", 1 es "Precio" y el otro es "Categorías". funcionan perfectamente Creé un componente de casilla de verificación separado y los datos se pasan allí sin ningún problema.

El problema es cuando hago clic en la casilla de verificación y los datos se representan, pero cuando hago clic en el menú desplegable en la página de índice una vez y luego lo presiono nuevamente, los datos son los mismos que se esperaba, pero el estilo en el que se hizo clic con eso quiero decir "marcado" se aplica a todos las casillas de verificación ¿Hay alguna manera de superar esto?

este es el componente de casilla de verificación separado

 import React, { useState } from "react"; interface Props { isChecked?: boolean; handleClick?: any; label: string; className?: string; labelClassName: string; handleChange?: any } const Checkbox = ({isChecked,handleClick,label,labelClassName,handleChange}: Props) => { const [checking,setChecking]=useState(isChecked) return ( <div> <input type="checkbox" id={label} checked={checking} onClick={()=>{handleClick();setChecking(!checking)}} onChange={handleChange} className={`space-x-3 text-gray-400 bg-gray-800 border rounded border-stone-200 $`} /> <label className={labelClassName} htmlFor={label}>{label}</label> </div> ); }; export default Checkbox;

Página de índice principal

 // these states are for dropdown/dropup styling const [categoryOpts, setCategoryOpts]= useState(true); const [typeOpts, setTypeOpts]= useState(true); const [priceOpts, setPriceOpts]= useState(true); const [checking,setChecking]=useState(false) const handleCheckChange=()=>{ setChecking(!checking) } index (){ <div> // this is for showing/hiding price option <div className='flex justify-between cursor-pointer' onClick={()=>setPriceOpts(!priceOpts)}> <Text as='h5' tag='h2'> Price </Text> {priceOpts? <dropdown icon up/> </svg> : <dropdown icon down> </svg> } </div> // price option mapping that comes from api source. { priceOpts? <div className='flex flex-col gap-2'> {checkboxes.map(({ label, onClick, key }) => <div key={key}> <Checkbox labelClassName='text-sm text-gray-400 ml-3' label={label} handleClick={onClick} isChecked={checking} handleChange={handleCheckChange} /> </div> )} </div>: '' } </div> }