reactjs - 如何使用 popperjs 在 React 中为多个项目使用一个弹出框？

Question

我想使用 PopperJS 为我的所有导航项使用一个弹出框。当用户将鼠标悬停在导航项上时，弹出框应显示在具有相应文本的位置。目前我的导航是这样的：

const navigation = [
   { name: "Item 1", href="item1" },
   { name: "Item 2", href="item2"},
   { name: "Item 3", href="item3" }
];

const [refElements, setRefElements] = useState([]);
const [isShowing, setIsShowing] = useState(false);

return (
   {navigation.map((item, index) => (
     <a
      key={item.name}
      href={item.href}
      ref={setRefElements}
      onMouseEnter={() => setIsShowing(true)}
      onMouseLeave={() => setIsShowing(false)}
     />
     <Popover
      refElement={refElements[index]}
      position="right"
      isShowing={isShowing}
     >
       <p>{item.name}</p>    
     </Popover/>
   )}
)

我需要改变什么才能让它工作？我该如何改进呢？