'how can i make a radio button using React?

I'm not sure how I can build a selection button, like to a radio button in React using TypeScript. The button must have an image and a color change of the button when selected.

Here is an example photo

enter image description here

I created a component, but I don't know how I can make the selection.

interface ItemProps extends InputHTMLAttributes<HTMLButtonElement> {
  label: string;
  name: string;
  options: Array<{
    label: string;
    value: string;
    image: string;
  }>;
}

const Selector: React.FC<ItemProps> = ({
  label,
  name,
  options,
  ...rest
}: ItemProps) => {
  return (
    <>
      <div className="col">
        <p>{label}</p>
        {options.map((option) => (
          <>
            <label className="btn" htmlFor={name}>
              <input type="radio" id={name} value={option.value} />
              <img src={option.image} />
              <span className="checkmark"></span>
              <p>{option.label}</p>
            </label>
          </>
        ))}
      </div>
    </>
  );
};```


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source