ForeignObject отображает текст вне границы SVG

Question

вот мой полный случай. Мне нужно нарисовать шестиугольник с текстом в середине. это хорошо работает на Chrome Mac, но на сафари он рендерит за пределами

 <Hexagon style={{ stroke: "white", fill: "#A1A1A1" }} flatTop>
    <foreignObject width="100%" height="100%">
      <Typography
        variant="subtitle1"
        gutterBottom
        className={classes.hexTitleStyle}
      >
        First Line
        <br />
        Second Line
      </Typography>
    </foreignObject>
  </Hexagon>

CodeSandBox

как его рендерить на Chrome Mac

как его рендерить на Safari Mac