How to position absolutely positioned element relative to ref position

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