複数のチェックボックスをコンポーネントに置くときにcheckedの監視で少し詰んだのでメモ。

チェックするごとに対象要素のidを配列に出し入れして、
配列内にidがあるかないかでtrue/falseをcheckedに入れるとGOOD

checked={checkedTags.includes(tag.id)}

const [checkedTags, setCheckedTags] = useState<number[]>([])
const handleCheckTag = useCallback(
  (tagId: number) => {
    if (checkedTags.includes(tagId)) {
      setCheckedTags(prev => {
        const index = prev.findIndex(val => val === tagId)
        const newArr = [...prev]
        newArr.splice(index, 1)
        return newArr
      })
    } else {
      setCheckedTags(prev => {
        return [...prev, tagId]
      })
    }
  },
  [checkedTags],
)
{tagList.map((tag, index) => {
  return (
    <STagCheck key={index}>
      <input
        type="checkbox"
        onChange={() => handleCheckTag(tag.id)}
        value={tag.name}
        name={tag.name}
        id={tag.id}
        checked={checkedTags.includes(tag.id)}
      />
      <label htmlFor={tag.id} className={tag.color}>
        {tag.name}
      </label>
    </STagCheck>
  )
})}