Menu auto-reopens when using SVG as center piece

[MagicIndustries]

I have a menu of hexes I've created using Planet, with the center hex showing an image. I use react-hexagon (https://github.com/rexxars/react-hexagon) and when it is the center element, the menu won't close properly.

Example with hex:

<Planet
    centerContent={
       <MenuAvatar />
    }
    open
    orbitRadius={220}
  autoClose>
           <MenuButton />
           <MenuButton />
           <MenuButton />
           <MenuButton />
           <MenuButton />
           <MenuButton />
</Planet>

MenuAvatar component:

const HexDiv = styled.div`
  width: ${HEX_WIDTH};
  max-width: ${HEX_WIDTH};
  height: ${HEX_HEIGHT};
  max-height: ${HEX_HEIGHT};
  position: relative;
`;

class MenuAvatar extends Component {

  render() {
      return (
        <HexDiv>
          <Hexagon
            style={{stroke: '#000000', strokeWidth: '0', width: '100px', height: '100px' }}
            backgroundImage={avatar}
            backgroundScale={1.1}
            flatTop={true}
            href="/personas/current"
          />
        </HexDiv>
      )
  }
}

Example without hex:

MenuAvatar component

const HexDiv = styled.div`
  width: ${HEX_WIDTH};
  max-width: ${HEX_WIDTH};
  height: ${HEX_HEIGHT};
  max-height: ${HEX_HEIGHT};
  position: relative;
`;

class MenuAvatar extends Component {

  render() {
      return (
        <HexDiv>
          <div style={{width: '100px', height: '100px', backgroundColor: '#000'}}></di
        </HexDiv>
      )
  }
}

Hexagon is basically created an svg in a div, with an image background. Any idea what's breaking the menu?