How to swap MUI icon on IconButton when hovering

I have these tabs that have a close button on them, if the content in them has edits then the close icon turns to a circle, similar to visual code.

  {tabs.map((tab, index) => {
    const child = (
      <StyledTab
        label={
          <span>
            {tab.label + ':' + tab.hasEdit}
            <IconButton size="small" component="span" onClick={() => closeClickHandler(tab.value)}>
              {tab.hasEdit ? (
                <CircleIcon style={{ fontSize: "12px" }} />
              ) : (
                <CloseIcon style={{ fontSize: "18px" }} />
              )}
            </IconButton>
          </span>
        }
        value={tab.value}
        key={index}
      />
    );

    return (
      <DraggableTab
        label={
          <span>
            {tab.label}
            <IconButton size="small" component="span" onClick={() => {
              closeClickHandler(tab.value);
            }}>
              {tab.hasEdit ? (
                <CircleIcon style={{ fontSize: "12px" }} />
              ) : (
                <CloseIcon style={{ fontSize: "18px" }} />
              )}
            </IconButton>
          </span>
        }
        value={tab.value}
        index={index}
        key={index}
        child={child}
      />
    );
  })}

What I'm having trouble with is getting the icon to change from a circle to a close icon while hovering over the button.

Could someone give me a hand on a good way to implement this please?!

You could do this by adding a state for the items. Then add a onMouseEnter and onMouseLeave events on the IconButton. When hovering we can add the index to the array and finally remove when we're leaving. To determine if a icon needs to change we can check if the index in in the hoveringItems.

const [hoveringItems, setHoveringItems] = useState([]);

function handleHover(index, isLeaving) {
  setHoveringItems((prevItems) => {
    if (isLeaving) return prevItems.filter((item) => item !== index);
    return [...prevItems, index];
  });
}

return (
  <IconButton
    size="small"
    component="span"
    onClick={() => {
      closeClickHandler(tab.value);
    }}
    onMouseEnter={() => handleHover(index, false)}
    onMouseLeave={() => handleHover(index, true)}
  >
    {tab.hasEdit || hoveringItems.includes(index) ? (
      <CircleIcon style={{ fontSize: "12px" }} />
    ) : (
      <CloseIcon style={{ fontSize: "18px" }} />
    )}
  </IconButton>
);