How can i use one popover for multiple items in React using popperjs?

Question

I want to use one popover for all my Navigation Items, using PopperJS. When the user hovers over an nav item, the popover should be displayed at the location with the corresponding text. At the moment my navigation looks like this:

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/>
   )}
)

What do i need to change to get this working? How can i improve this?