Can't navigate to another page/route using 'react-scroll' with NextJs14

react-scroll is designed for smooth scrolling within the same page or component, not for navigating between different pages or routes in a Next.js application. You should use the Link component from next/link to navigate to different pages or routes. Here's why and how you should use it:

"use client";
import React, { useState, useEffect } from "react";
import Link from "next/link";
import Image from "next/image";

export default function Navbar() {
const [scroll, setScroll] = useState(false);
const [menu, setMenu] = useState(false);

useEffect(() => {
const handleScroll = () => {
if (window.scrollY > 100) {
setScroll(true);
} else {
setScroll(false);
}
};

window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);

return (