Add multiply TootlTip to the same component

[d7baron]

I've just discovered the library and wanted to test putting a ToolTip on my component when I hover my mouse over it. So far, so good.
Then I wondered if it was possible to display several ToolTips one below the other by mapping a list.
Unfortunately, the ToolTips overlap and I don't know how I could display them one below the other.

Here is my code for my ToolTip component :

import {useFloating, useInteractions,useClientPoint  ,useHover,  useFocus, } from '@floating-ui/react';
import { useState } from 'react';
import "./ToolTip.css";
function ToolTip({ categories, source, alt }) {

  const [isOpen, setIsOpen] = useState(false);
 
  const {refs,floatingStyles ,context} = useFloating({
    onOpenChange(isOpen) {
      setIsOpen(isOpen);
    },});

  const clientPoint = useClientPoint(context ,{
    enabled: true,
  });
 

  const hover = useHover(context);
  const focus = useFocus(context);

  const {getReferenceProps, getFloatingProps} = useInteractions([ hover, focus,clientPoint]);


  return (
    <div>
      <img ref={refs.setReference} src={source} alt={alt} {...getReferenceProps()}/>
      {
      isOpen && <>
        {
        categories.map(category => {
          return(
          <div  key ={category} className="floating" ref={refs.setFloating} style={floatingStyles} {...getFloatingProps()}>
          {category}
        </div>
        )          
        }
        )}
      </>
      }
    </div>
  );
}

export default ToolTip;

and here is How I called it :

<ToolTip categories={["red","blue","dark"]} source={"https://placehold.co/600/orange/white"} alt = "Place holder"/>

I'm trying to do something like that :

I know it sounds basic but I confess I'm not sure where to look.

Thank you in advance