React 同一组件的多个实例都得到相同的回调

问：

我有一个 React 组件，它只执行第一个 Component 实例的第一个回调，即使我单击第二个或第三个组件。这是我的代码：

import React, { useState } from 'react';
import styles from './checkbox.module.css';

interface CheckboxProps {
  initialState: boolean;
  onToggle: () => void;
}

const Checkbox: React.FC<CheckboxProps> = ({ initialState, onToggle }) => {
  const [checked, setChecked] = useState<boolean>(initialState);

  const handleChange = () => {
    const newChecked = !checked;
    setChecked(newChecked);
    onToggle();
  };

  return (
    <>
      <input
        className={styles.switch}
        type="checkbox"
        id="switch"
        checked={checked}
        onChange={handleChange}
      />
      <label className={styles['switch-label']} htmlFor="switch">Toggle</label>
    </>
  );
};

export default Checkbox;

CSS代码：

.switch {
  height: 0;
  width: 0;
  visibility: hidden;
}

.switch-label {
  cursor: pointer;
  text-indent: -9999px;
  width: 51.2px; 
  height: 25.6px; 
  background: rgb(241, 44, 44);
  display: block;
  border-radius: 80px;
  position: relative;
}

.switch-label:after {
  content: "";
  position: absolute;
  top: 4px; 
  left: 4px; 
  width: 17.6px; 
  height: 17.6px; 
  background: #fff;
  border-radius: 70.4px; 
  transition: 0.3s;
}

.switch:checked + .switch-label {
  background: #a5ce1e;
}

.switch:checked + .switch-label:after {
  left: calc(100% - 4px); 
  transform: translateX(-100%);
}

.switch-label:active:after {
  width: 22.4px; 
}

如果我像这样使用我的组件，即使我点击第二个或第三个组件，React 也只执行第一个组件的回调

<div>
<Checkbox key={1} initialState={false} onToggle={()=>{console.log("One")}} />
<Checkbox key={2} initialState={false} onToggle={()=>{console.log("Two")}} />
<Checkbox key={3} initialState={false} onToggle={()=>{console.log("Three")}} />
</div>