React and Parallax : Misplaced parallax image when clicking on in-page navigation link

Question

I am using a React library called Rellax for a parallax effect on my site. It works nicely when I scroll towards that section of the page. But, when I click on the navbar and navigate to a particular #section, this very parallax image is floating in a completely different distance to where it was supposed to be placed.

I have a feeling this is related to how the positioning of the element is calculated, since my page structure has no single main body but a group of react components.

The same issue occurred with other parallax libraries.

Right now I am referring to the parallax component this way: (Code is abbreviated and only shows sections where I refer to the effect)

export default function Advantages() {
  useEffect(() => {
    // init parallax
    new Rellax('#parallaxImage', {
      center: true,
    });
  });
  return (
    <section>
        <img 
          id="parallaxImage" 
          className="w-100" 
          data-rellax-speed="2" 
          src={ traktor }
          alt="tractor parallax" />
   </section>
)}

Answer 1

Shouldn't you only be calling this once (by adding square brackets)?

useEffect(() => {
  // init parallax
  new Rellax('#parallaxImage', {
    center: true,
  });
}, []); // <-- Empty array