I am trying to use framer-motion in a Next/React app, starting with some working examples. But it is a bit hard to see what is going on, in some cases and know how to access some pieces of information. For example in the following code:

docs.map(doc => (
  <motion.div className="img-wrap" key={doc.id} 
    layout
    whileHover={{opacity:1}}
    onClick={() => setSelectedImg(doc.imageRefer)} >

  <motion.img src={doc.imageRefer} alt="uploaded picture"
              initial={{opacity:0}}
              animate={{opacity:1}}
              whileHover={{x:-100,y:-100}}
              transition={{delay:1}} />
  ....
  </motion.div>
))

The line : whileHover={{x:-100,y:-100}} is having the effect I want. But instead of having arbitrary values (-100), I would like to set values depending on the width and height of the image. And this the question:

How can I get the size (width & height) of the image provided in the src attribute of motion.img ?