Tengo el siguiente código:

 import './radio.css'; const Radio = (props) => { const { label, checked, handleChange } = props; return ( <label className="containerRadio"> {label} <input type="radio" checked={checked} name="items" value={label} onChange={handleChange} /> <span className="checkmark"></span> </label> ); }; export default Radio; /* Customize the label (the container) */ .containerRadio { display: block; position: relative; padding-left: 40px; margin-bottom: 12px; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; color: var(--green); margin-right: 20px; font-family: 'GT Maru Mega'; font-size: 20px; } /* Hide the browser's default radio button */ .containerRadio input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } /* Create a custom radio button */ .checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #eee; border-radius: 50%; } /* On mouse-over, add a grey background color */ .containerRadio:hover input ~ .checkmark { background-color: #ccc; } /* When the radio button is checked, add a blue background */ .containerRadio input:checked ~ .checkmark { background-color: var(--red); } /* Create the indicator (the dot/circle - hidden when not checked) */ .checkmark:after { content: ''; position: absolute; display: none; } /* Show the indicator (dot/circle) when checked */ .containerRadio input:checked ~ .checkmark:after { display: block; } /* Style the indicator (dot/circle) */ .containerRadio .checkmark:after { top: 9px; left: 9px; width: 8px; height: 8px; border-radius: 50%; background: white; } {[1, 2, 3, 4, 5].map((value, index) => ( <Radio key={index} label={value} handleChange={handleChange} checked={numberOfSelectedItems == value} /> ))}

pero aunque el estado lo cambie, tengo que hacer doble clic en la casilla de verificación para ver la casilla de verificación como marcada

Función ACTUALIZAR handleChange:

 const [numberOfSelectedItems, setNumberOfSeletedItems] = useState(1); const handleChange = (event) => { event.preventDefault(); setNumberOfSeletedItems(event.target.value); };