React - assigning ref via loop to image array - arrays

Question

I am still very new to this and probably completely overthinking/overcomplicating things.
I have an array of images which display as expected. As part of the mapping process, I create a new ref for each image, so that I can tap into the 'current' attribute to retrieve height and width, based on which I have a ternary operator to apply some styling. I doubt this is the only or best method to achieve this and I am open to suggestions...
Now to the problem. If I have one image and one ref, the above process works great, however, once I introduce more images and attempt to get 'current' it fails. But I can console log my ref array and I get everything back including the dimensions of the image.
The problem is staring me in the face but I simply cannot figure out what the problem is. It may simply be that I have misunderstood how references and current work.
Any help would be greatly appreciated.
My code as follows:
import React, { useState, useRef, useEffect, createRef } from "react";
import Images from "../images";
const IllustrationList = () => {
const [images, setImages] = useState([]);
useEffect(() => {
// populate with Images from Images Array
setImages(Images);
}, []);
// ref array
const imageRefs = [];
const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
useEffect(() => {
if (imageRefs.current) {
setDimensions({
width: imageRefs.current.naturalWidth,
height: imageRefs.current.naturalHeight,
});
}
});
return (
<div className="illustration-gallery">
<ul className="cropped-images pl-0">
{images.map((image, i) => {
const newRef = createRef();
imageRefs.push(newRef);
return (
<li className="li-illustration" key={i}>
<a href={image.image} data-lightbox="mygallery">
<img
src={image.image}
alt="illustrations"
ref={newRef}
className={
dimensions.width > dimensions.height ? "imageSize" : ""
}
/>
</a>
</li>
);
})}
</ul>
</div>
);
};
export default IllustrationList;

Answer 1

I was able to resolve my problem.
I think I was completely overthinking the problem and came up with a much simpler solution. I don't know if this is the best way to achieve this, but it does what I want/need it to.
useEffect(() => {
let landScape = document.querySelectorAll("img");
landScape.forEach(() => {
for (var i = 0; i < Images.length; i++) {
if (landScape[i].naturalWidth > landScape[i].naturalHeight) {
landScape[i].className = "landscape";
}
}
});