React multiple instances of same component are getting the same callback

I have a React Component that is only executing the first callback of the first Component instance, even if I click the second or third component. Here is my code:

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 code:

.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; 
}

If I use my component like this, React Only executes the callback of the first component even if I click the second or the third component

<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>

The id attribute is meant to be unique within an HTML document, so having multiple elements with the same ID can lead to conflicts.

      <Checkbox key={1} initialState={false} onToggle={()=>{console.log("One")}} id={'one'}/>
      <Checkbox key={2} initialState={false} onToggle={()=>{console.log("Two")}} id={'two'}/>
      <Checkbox key={3} initialState={false} onToggle={()=>{console.log("Three")}} id={'three'}/>

Use this instead hardcode 'switch' all your input

<>
  <input
    type="checkbox"
    id={id}
    checked={checked}
    onChange={handleChange}
  />
  <label htmlFor={id}>Toggle</label>
</>