How to position absolutely positioned element relative to ref position - reactjs

Question

I've got a bit of a problem here, hope I get help :0
well I am building a pretty little App on React and I have a navbar which includes an absolutely positioned div and two images for now... I have refs on these images and I want this navbar div to be positioned with the same top coordinates upon render...
Here is how I'm trying:
this code sets top state property to refs position:
componentDidMount() {
this.fetchApi();
this.setState({
scrolling: { top: this.first.current.offsetTop },
});
}
this is basically navbar
let { top } = this.state.scrolling;
<div className="map__left-column__logos">
<img
ref={this.first}
onClick={this.linkContainerClick}
className="img-svg"
src={pin}
alt="pingreen"
/>
<img onClick={this.linkContainerClick} src={logo} alt="logo" />
<div
ref={this.myRef}
className="link-container"
style={{ transform, top }}
>
<div className="link-container__upcurve"></div>
<div className="link-container__wrapper"></div>
<a href="#" id="container-href">
{" "}
<img
style={{
top: img1,
transition: "all linear .2s",
}}
className="img-svg"
src={chosenImg}
alt=""
/>
</a>
<div className="link-container__downcurve"></div>
</div>
</div>
</div>
and this is the linKContainerClick function trying to calculate where to scroll after I click the images
linkContainerClick = ({ target }) => {
let id = target.offsetTop;
let pixel = id - this.state.scrolling.top;
this.setState({ innerHtml: target.alt });
this.setState({
scrolling: {
...this.state.scrolling,
transform: `translateY(${pixel}px)`,
},
});
};
The problem is that on the first render of the App the link-container element is misplaced by 20 pixels... after refresh it moves to the right place