React useRef updating one step behind

Question

What I want to achieve: interaction image

I basically have a bunch of dynamically loaded DisplayComponents, which render externally loaded .obj files but that's not relevant. When clicking individual DisplayComponents, I want to wrap it in my WraparoundComponent. So before, I have something like:

 <Canvas onChange={changeHandler}>
     <DisplayComponent data={objData1}></DisplayComponent>
     <DisplayComponent data={objData2}></DisplayComponent>
     <DisplayComponent data={objData3}></DisplayComponent>
 </Canvas>

And after the user clicks on one of the Components (for example the one holding objData2), this is what I want to happen:

 <Canvas onChange={changeHandler}>
     <DisplayComponent data={objData1}></DisplayComponent>
     <WraparoundComponent ref={ref}>
         <DisplayComponent data={objData2}></DisplayComponent>
     </WraparoundComponent>
     <DisplayComponent data={objData3}></DisplayComponent>
 </Canvas>

Some crucial things to note: I have an onChange listener attached to the Canvas element. Nothing much (for the time being) happens in here, for now I am just logging the .current of the ref attached to WraparoundComponent. The ref attached to WraparoundComponent is created using useRef()

Now here's what actually happens though:

After the 1st click (on objC), console.log(ref) will be undefined.

After the 2nd click (on objA), console.log(ref) will be objC (aka the first clicked on)

Like I said, this .log happens in the useEffect() hook. This seems to always be "a step behind", as even the graphical representation seems to be working as intended, meaning the WraparoundComponent will actually show up, around the last clicked DisplayComponent.

There must be something I'm not getting about how useRef(), useEffect() and all that works together. Help is greatly appreciated, thank you so much in advance.