체크박스가 여러 개 있는데 하나의 체크박스를 클릭하고 다음 체크박스를 클릭하면 이전 체크박스의 선택이 취소됩니다. 이유를 아시나요?

이것은 내 체크박스 구성요소입니다:

const Checkbox = ({ key, id, label, selected, name, onChange }:any) => 반품 ( 
 <다중 키 입력={id} id={id} type="checkbox" selected={checked} name={name} onChange={onChange} /> {label} 
 ) }

이것은 주요 구성 요소의 모습입니다. 데이터는 배열에 존재하고 매핑되지만 이전 확인란을 선택 취소하는 이유는 확실하지 않습니다. 다른 쓸모 없는 JSX 코드를 많이 제거했습니다. <

const checkboxList = [ { 아이디:0, label:"대문자", 이름: "상단", 확인됨:거짓 }, { 아이디:1, label:"소문자", 이름: "낮음", 확인됨:거짓 }, { 아이디:2, label:"번호", 이름: "번호", 확인됨:거짓 }, { 아이디:3, 라벨:"기호", 이름: "기호", 확인됨:거짓 } ] const PasswordGenerator = () => const [data, setData] = useState(checkboxList) const handlerChange = (id:번호) => const updateCheckboxes = checkboxList.map((checkbox) => checkbox.id === id ? {...체크박스, 선택됨: !checkbox.checked}:체크박스) setData(updateCheckboxes) } 반품 ( 
 {data.map((obj) => { 반품( 
 <체크박스 다중={true} id={obj.id} 라벨 = {obj.label} 확인됨= {obj.checked} 이름= {obj.name} onChange = {() =>handleChange(obj.id)} /> 
 ) })} 
 ) }