Hello everyone,

I need your help with an issue on the mobile version of my website. I'm trying to use scrolling to navigate to my 'carousel' section. For all my other links, it works well—I land perfectly on the corresponding sections. But for the carousel, I end up between section 1 and the beginning of the carousel.
For the desktop format I fall perfectly on it

How can I make it so that I land perfectly on the carousel section?

-> NavBar.js

const handleClick = (e) => {
    e.preventDefault();
  
    const targetId = e.target.getAttribute("href").slice(1);
    const targetElement = document.getElementById(targetId);
  
    if (targetElement) {
      const yOffset = 0;
      const yPosition =
        targetElement.getBoundingClientRect().top + window.pageYOffset + yOffset;
  
      window.scrollTo({ top: yPosition, behavior: "smooth" });
    }
  };
  
  const navItems = [
    { href: "#photos-section", label: messages.HeaderNavBar?.photos || "Photos" },
    { href: "#history-section", label: messages.HeaderNavBar?.history || "Histoire" },
    { href: "#link-section", label: messages.HeaderNavBar?.links || "Liens" },
    { href: "#contact-form", label: messages.HeaderNavBar?.contact || "Contact" },
  ];

-> return (format mobile)

{isOpen && (
        <div className="md:hidden mt-4">
          <div className="flex flex-col space-y-4 text-white font-semibold">
            {navItems.map((item) => (
              <a
                key={item.href}
                href={item.href}
                className="hover:underline transition duration-300 ease-in-out hover:text-[#FFD700] text-lg tracking-wide uppercase"
                onClick={handleClick}
              >
                {item.label}
              </a>
            ))}
          </div>
        </div>
      )}

`