What am I missing when using react popper's usePopper() hook to generate an arrow?

Question

I'm trying to follow the example on Popper.js's documentation on how to implement an arrow found here using their usePopper hook:

https://popper.js.org/react-popper/v2/

I tried putting this in a codebox and then console.log the styles.arrow and see that it's printing this:

{position: "absolute", top: "", left: "0", transform: "translate3d(50px, 0px, 0)"}

So I add this code to my app which is in typescript, it looks like this:

 const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);
  const [popperElement, setPopperElement] = useState<HTMLElement | null>(null);
  const [arrowElement, setArrowElement] = useState<HTMLElement | null>(null);
  const { styles, attributes } = usePopper(referenceElement, popperElement, {
    modifiers: [
      {
        name: 'arrow',
        options: {
          element: arrowElement,
        },
      },
    ],
  });

However, when I console.log styles.arrow here, it comes back undefined. I'm feeling like there's something wrong here. Have I declared something wrong?

Answer 1

There is nothing wrong with the example or behavior.

As mentioned in this comment, Popper doesn't provide any style. and you must see the styling tutorial