Why radio input component doesn't work?

import { ChangeEvent } from "react"

interface RadioButton extends React.HTMLAttributes<HTMLInputElement> {
  label: string
  inputName: string
  onChange: (e: ChangeEvent<HTMLInputElement>) => void
}

export function RadioButton({ label, inputName, onChange, ...props }: RadioButton) {
  return (
    <label htmlFor={label} className="relative cursor-pointer flex items-center group">
      <input type="radio" name={inputName} value={label} className="hidden" onChange={(e) => onChange(e)} {...props} />
      <span
        className={`label relative block float-left mr-[10px] w-[20px] h-[20px]
       rounded-[50%] after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:w-[10px] after:h-[10px] after:rounded-[50%]
      after:scale-0 after:transition-all after:duration-200 after:opacity-10 after:pointer-events-none
      group-hover:after:scale-[3.6]`}
      />
      {label}
    </label>
  )
}

import { ChangeEvent } from "react"

interface RadioButton extends React.HTMLAttributes<HTMLInputElement> {
  label: string
  inputName: string
  onChange: (e: ChangeEvent<HTMLInputElement>) => void
}

export function RadioButton({ label, inputName, onChange, ...props }: RadioButton) {
  return (
    <label htmlFor={label} className="relative cursor-pointer flex items-center group">
      <input type="radio" name={inputName} value={label} className="hidden" onChange={(e) => onChange(e)} {...props} />
      <span
        className={`label relative block float-left mr-[10px] w-[20px] h-[20px]
       rounded-[50%] after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:w-[10px] after:h-[10px] after:rounded-[50%]
      after:scale-0 after:transition-all after:duration-200 after:opacity-10 after:pointer-events-none
      group-hover:after:scale-[3.6]`}
      />
      {label}
    </label>
  )
}

 const [label1, setLabel1] = useState('');
  const [label2, setLabel2] = useState('');


<RadioButton label="label1" inputName="input-name1" onChange={e => setLabel1(e.target.value)} />
      <RadioButton label="label2" inputName="input-name1" onChange={e => setLabel1(e.target.value)} />
      <RadioButton label="label3" inputName="input-name2" onChange={e => setLabel2(e.target.value)} />
      <RadioButton label="label4" inputName="input-name2" onChange={e => setLabel2(e.target.value)} />
      <p>{label1}</p>
      <p>{label2}</p>

 const [label1, setLabel1] = useState('');
  const [label2, setLabel2] = useState('');


<RadioButton label="label1" inputName="input-name1" onChange={e => setLabel1(e.target.value)} />
      <RadioButton label="label2" inputName="input-name1" onChange={e => setLabel1(e.target.value)} />
      <RadioButton label="label3" inputName="input-name2" onChange={e => setLabel2(e.target.value)} />
      <RadioButton label="label4" inputName="input-name2" onChange={e => setLabel2(e.target.value)} />
      <p>{label1}</p>
      <p>{label2}</p>