SectionX should display the same values as the second console.log. You can see that when i log props and sectionRef.current, i get the same values... But sectionRef.current comes with a (flex).

const horizontalScroll = (props) => {
    var container = document.getElementById(styles["a-text__box"]);
    var sectionX = props.getBoundingClientRect().x;
    console.log(sectionX);
    console.log(sectionRef.current.getBoundingClientRect().x);

    console.log(props);
    console.log(sectionRef.current);

    // container.scrollTo({
    //   top: 0,
    //   left: sectionX,
    //   behavior: "smooth",
    // });
  };

 

CONSOLE:

  0
  1193.28125
  
  <div>...</div>
  <div>...</div>(flex)