reactjs - ฉันขาดอะไรไปเมื่อใช้ hook usePopper() ของ react popper เพื่อสร้างลูกศร?

ฉันกำลังพยายามทำตามตัวอย่างในเอกสารของ Popper.js เกี่ยวกับวิธีการใช้งานลูกศรที่พบที่นี่โดยใช้ hook ของพวกเขา usePopper:

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

ฉันพยายามใส่นี่ในโค้ดบล็อกแล้วจากนั้น console.log styles.arrow และเห็นว่ามันพิมพ์สิ่งนี้:

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

ดังนั้นฉันจึงเพิ่มโค้ดนี้ลงในแอปของฉันซึ่งเขียนด้วยไทป์สคริปต์ มันดูเหมือนแบบนี้:

 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,
        },
      },
    ],
  });

อย่างไรก็ตาม เมื่อฉันใช้ console.log กับ styles.arrow ที่นี่ มันกลับมาเป็น undefined ฉันรู้สึกว่ามีบางอย่างผิดพลาดที่นี่ ฉันได้ประกาศอะไรผิดหรือเปล่า?

คำตอบ #1

ไม่มีอะไรผิดปกติกับตัวอย่างหรือพฤติกรรม

ดังที่กล่าวไว้ในความคิดเห็นนี้ Popper ไม่ได้ให้สไตล์ใด ๆ และคุณต้องดูบทเรียนการจัดสไตล์