MUI 5 List, ListItemButton does not on-click on component load

I have a List which gets selected correctly (the 0 index) but the onCLick does not get triggered when I refresh the page and I cant seem to get it working, it works fine on hot-reload.

          <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>

This is the api call that I make and once I get the data pass on the 0 index to the click handler to fetch the relevant data for that click

        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);
        });
     };

The onClick function, simple updates the index and uses a key to fetch the data for that click

 const handleGroupClick = (group, selectedIndex) => {

    updateSelected(selectedIndex);

    if (allMessageGroups[1].id === "0") {
        allMessageGroups.splice(1, 1); // remove new message
    }

  
    getGroupMessageWithId(group._key);
    setSelectedMsgGroup([]);
};

Whats strange to me is that when I hard reload the page the onClick does not get triggered but when I save in the IDe the hot-reload triggers the onClick

Any suggestions much appreciated