using refs on GatsbyImage

[popeating]

I have a gallery of images, when i hover a single image i should read the mouse position relative to the image and based on the position animate the image (its a basic skew animation).
Before switching to the new GatsbyImage i was using the previous one (sometime the BackgroundImage), and inside the tag i had the following code:

let picRef = useRef([]);

<Img
 ref={(el) => (picRef.current[i] = el)}
onMouseMove={({ clientX: x, clientY: y }) =>
  animate(picRef.current[i], x, y)
 }
onMouseLeave={() => reanimate(picRef.current[i])}
...
fluid={fluid}
/>

so when moving over the image i was passing my position to the animate function and animate;
now with GatsbyImage picRef return undefined;
before wrapping everything inside a div and ref to the div, since GatsbyImage already wrap inside a div, i was wondering if i can set a ref here

Thank you