Tooltip with PopperJs, showing first state unpositioned

Question

https://codesandbox.io/s/intelligent-feynman-j5wzv

If you hover on the button, you will see an effect in the first rendering and then the right position of the Tooltip, Am I missing anything when using popperjs properly?

Answer 1

Solution was to add to StyledToolTip some visibility attributes:

visibility: "hidden"
"&[data-popper-placement]": {
    visibility: "visible",
  },