Lista MUI 5, ListItemButton no hace clic en la carga del componente

Tengo una Lista que se selecciona correctamente (el índice 0) pero onCLick no se activa cuando actualizo la página y parece que no puedo hacer que funcione, funciona bien en la recarga en caliente.

 <ListItemButton key={i} className={`click-item p-2 message-group-item`} selected={selectedItem === i} onClick={() => handleGroupClick(group, i)} autoFocus dense divider style={ selectedItem === i ? { backgroundColor: "var(--lc-pink)", color: "#fff" } : { backgroundColor: "#fff" } }> {group.name.replaceAll(",", ", ").replaceAll("+", ", ").replaceAll("-", "")} </ListItemButton>

Esta es la llamada API que hago y una vez que obtengo los datos, paso el índice 0 al controlador de clics para obtener los datos relevantes para ese clic.

 const getAllMessageGroups = () => { axios .get(`${baseUrl}message-group`) .then((response) => { const data = response.data.data; setAllMessageGroups(data); if (selectedItem === 0) { handleGroupClick(data[0], 0); } }) .catch((error) => { console.log("message-group-error ", error.message); }); };

La función onClick, simplemente actualiza el índice y usa una clave para obtener los datos de ese clic.

 const handleGroupClick = (group, selectedIndex) => { updateSelected(selectedIndex); if (allMessageGroups[1].id === "0") { allMessageGroups.splice(1, 1); // remove new message } getGroupMessageWithId(group._key); setSelectedMsgGroup([]); };

Lo que me extraña es que cuando vuelvo a cargar la página, el onClick no se activa, pero cuando guardo en el IDe, la recarga en caliente activa el onClick.

Cualquier sugerencia muy apreciada