Scroll Snapping Navigation issue (It works fine with scroll, but not by <nav> anchor links)

I've been working on a clone project, one of the projects from frontend practice (here is the link https://www.frontendpractice.com/projects/backstage-talks)

I'm trying to make Backstage Talks magazine archive site using React.

If you take a look at the live demo, on scroll it's supposed to change the background color.

So, current status of my project:

Background color change on scroll => works fine

but when I click on the navigation element on the bottom right:

• works fine in a descending order (So if I click on issue 5, 4, 3, 2, 1 it works fine)
• but when I try to click in an ascending order (issue 1, 2, 3, 4, 5, 6) the background color change is lagging by one number. (when I click on issue 2, it shows the background color or 1, click on issue 3, background color of issue 2, and so on and so forth)

I'm just a beginner in React so I cannot even wrap my head around what would cause this delay.

Here's my code.

function App() {

  return (
    <>
      <Header />
      <div className="cover-container">
        <Cover issue="6" imgSrc={issue6} />
        <Cover issue="5" imgSrc={issue5} />
        <Cover issue="4" imgSrc={issue4} />
        <Cover issue="3" imgSrc={issue3} />
        <Cover issue="2" imgSrc={issue2} />
        <Cover issue="1" imgSrc={issue1} />
      </div>
      <Footer />
      <Nav />
    </>
  )
}

Here's the code for Cover component:

export default function Cover({ issue, imgSrc }) {
    const containerRef = useRef(null)
    const [ isVisible, setIsVisible ] = useState(false)

const callbackFunction = (entries) => {
    const [ entry ] = entries
    setIsVisible(entry.isIntersecting)
}
const options = {
    root: null,
    rootMargin: "0px",
    threshold: 0.8
}

useEffect(() => {
    
    const observer = new IntersectionObserver(callbackFunction, options)
    if (containerRef.current) {
        observer.observe(containerRef.current)
        document.body.className = containerRef.current.id   
    }
    
    return () => {
        if (containerRef.current) {
            observer.unobserve(containerRef.current)
        }
    }
}, [containerRef, options])

    return (
        <section id={`issue${issue}`} ref={containerRef}>
            <img src={imgSrc} alt={`cover of backstage talks issue ${issue}`} />
            <p>{`Issue #${issue}`}</p>
            <a href={`https://www.bruil.info/product/backstage-talks-${issue}/`}>BUY HERE</a>
            <div>or in <a href="https://backstagetalks.com/stocklist.php">seleted stores</a></div>
        </section>
    )
}

and here's the code for Nav component:

export default function Nav() {
    const issueList = [6, 5, 4, 3, 2, 1]
    const [selected, setSelected] = useState(null);

    return (
        <nav>
            <ol>
                {
                    issueList.map(item => <li key={item}><a href={`#issue${item}`} onClick={() => document.body.className = `issue${item}`}>{`Issue #${item}`}</a></li>)
                }
            </ol>
        </nav>
    )
}

If anyone can enlighten me as to how to solve this problem, or even if you don't have the solution, but if you can point me to the direction where I can dig more, that'd be great.

Thanks in advance for your help!