How to implement ripple effect to a title inside a loop?

Question

When I click on a title, I would like a ripple effect to be triggered on it. So far, no matter witch title I click on, it's the last one that has the ripple effect.

Here's my jsx

import useRipple from "use-ripple-hook"

const internalRef = useRef(null)
const elementsRef = useRef(null)

const [ripple, event] = useRipple({
        duration: 450,
        color: "rgba(0, 152, 255, .3)",
        cancelAutomatically: false,
        className: "__useRipple--ripple",
        containerClassName: "__useRipple--ripple-container",
        ignoreNonLeftClick: true,
        timingFunction: "cubic-bezier(.42,.36,.28,.88)",
        disabled: false,
        ref: internalRef,
        onSpawn: undefined,
    })

return (
<div ref={elementsRef} className={styles.features}>
  {datas.map(data => (
     <h4
       key={data.id}
       onClick={() => handleClick(data.id)}
       ref={ripple}
       onMouseDown={event}>
       {data.title}
      </h4>
   ))}
</div>
)