icons do not close after clicking on each other

I have icons that redirect to edit or view my table elements. But if I click on more than one of the icons, the other icons remain open. I can't understand why they are behaving this way. Here is an image of what is happening: Image Example

What I would like is that when I click on the second icon, the previous icon would be closed.

My code:

 const isReadOnly = (Service: ServiceModel) => {
 
    let aux = !hasWritePermission(variantModules.SERVICES, getCurrentAccount().user);
    return aux;
  }

  const openMenu = async (service: ServiceModel) => {
    let show = 'block';
    if (document.getElementById('menu_' + service.serviceId).style.display === 'block') {
      show = 'none';
    }
    document.getElementById('menu_' + service.serviceId).style.display = show;
  }

  <IconButton
            onClick={() => {
              openMenu(service);
            }}

          >
            <Icon style={themeStyle}>settings</Icon>
          </IconButton>

          <div id={"menu_" + service.serviceId} style={{ 'display': 'none' }} className={Styles.menuTable}>
            {!isReadOnly(service) && <IconButton component={Link} to={`/servicos/${service.serviceId}`}>
              <Tooltip title="Edit">
                <Icon>edit</Icon>
              </Tooltip>
            </IconButton>}
            <IconButton component={Link} to={`/servicos-view/${service.serviceId}`}>
              <Tooltip title="Visibility">
                <Icon >visibility</Icon>
              </Tooltip>
            </IconButton>
            {handleDeleteService(service) && <IconButton onClick={() => { openMenu(service); deleteService(service.serviceId); }}>
              <Tooltip title="Delete">
                <Icon >delete</Icon>
              </Tooltip>
            </IconButton>}
          </div>

I appreciate any help given