Pero el problema al que me enfrento es que la opción no se restablece si los valores de las opciones son los mismos.

Supongo que esto significa que desea que el menú desplegable se restablezca al primer índice cada vez que se cambia el botón de opción. En este momento, el DOM tiene el control de lo que está seleccionado actualmente, por lo que si, por ejemplo, se selecciona el tercer elemento en la lista desplegable, el DOM almacenará que el tercer elemento tiene un valor seleccionado. React solo cambia los valores que hay en cada elemento cuando cambia la opción (ver reconciliación ), en realidad no está recreando el nodo de select en el DOM.

Para esto, sugiero hacer que el elemento select sea controlado, por ejemplo

 import React, { useState } from "react"; import ReactDOM from "react-dom"; function App() { const [current, setCurrent] = useState(1); const [selected, setSelected] = useState(""); const data = [ { name: "option1", info: [1, 2, 3, 4, 5] }, { name: "option2", info: [1, 2, 3, 4, 5] }, { name: "option3", info: [6, 7, 8, 9, 10] } ]; function handleChange(id) { setCurrent(id); setSelected(""); } function handleSelected(event) { setSelected(event.target.value); } return ( <div> {data.map((item, key) => { return ( <label key={key}> <input type="radio" name="test" checked={key === current ? true : false} onChange={(e) => handleChange(key)} value={key} /> {item.name} </label> ); })} <hr /> <br /> <select value={selected} style={{ width: "100px", padding: 10 }} onChange={handleSelected} > {data[current].info.map((item, key) => { return <option>{item}</option>; })} </select> </div> ); } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement);

https://codesandbox.io/s/react-hello-world-forked-d9cuh?file=/src/index.js