Как позиционировать абсолютно позиционированный элемент относительно позиции ссылки

Question

У меня небольшая проблема, надеюсь, мне помогут: 0 ну, я создаю довольно маленькое приложение на React, и у меня есть панель навигации, которая включает абсолютно позиционированный div и два изображения на данный момент ... Я есть ссылки на эти изображения, и я хочу, чтобы этот div панели навигации располагался с теми же верхними координатами при рендеринге ... Вот как я пытаюсь:

этот код устанавливает свойство верхнего состояния в позицию refs:

componentDidMount() {
    this.fetchApi();
    this.setState({
      scrolling: { top: this.first.current.offsetTop },
    });
  }

это в основном панель навигации

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>

, а это функция linKContainerClick, которая пытается вычислить, где прокручивать после того, как я нажимаю на изображения

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)`,
      },
    });
  };

Проблема в том, что при первом рендеринге приложения элемент контейнера ссылки смещается на 20 пикселей ... после refre sh он перемещается в нужное место