Link not active in next.js in navbar Bootstrap 5

Question

Here's whats happening:

Expected: after clicking on the Link, the navbar collapses

Issue: Link is not clickable

Steps to reproduce the error:

1. Import Link from 'next'
2. Add data-bs-toggle="collapse" data-bs-target=".navbar-collapse"

Navbar:

import React from "react";
import Image from "next/image";
import Link from "next/link";

function Navbar() {
  return (
    <nav className={`${styles.navbar} navbar navbar-expand-sm fixed-top `}>
      <Link href="/">
        <a className="d-flex align-content-center nav-item">
          <Image
            alt="Novawalks logo"
            src="http://demo.rommar.in.ua/novanoid/novanoid-1/img/logo-light.png"
            width={75}
            height={20}
          />
        </a>
      </Link>
      <button
        className="navbar-toggler shadow-none"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#navBarContentDiv"
        aria-controls="navBarContentDiv"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <FontAwesomeIcon icon={faBars} color="white" />
      </button>
      <div
        className="collapse navbar-collapse justify-content-end"
        id="navBarContentDiv"
        data-bs-toggle="collapse"
        data-bs-target=".navbar-collapse"
      >
        <div className="navbar-nav align-items-center">
          <Link href="/" passHref>
            <a className="nav-item nav-link active" href="#">
              Home
            </a>
          </Link>

          <Link href="/walks">
            <a className="nav-item nav-link">Walks</a>
          </Link>

          <Link href="/aboutUs">
            <a className="nav-item nav-link">About us</a>
          </Link>
          <Link href="/team">
            <a className="nav-item nav-link">Team</a>
          </Link>

          <Link href="/contact">
            <a className="nav-item nav-link">Contact us</a>
          </Link>
        </div>
      </div>
    </nav>
  );
}

export default Navbar;

It has something to do with routes and Next.js for sure, but I don't really understand how to solve it...