When working on this particular section, consider implementing a conditional statement as shown below:

      const updateColor = () => {
        setTheme(window.scrollY >= 650)
      };

You can add a condition by utilizing the function isHomePage, like so:

      const updateColor = () => {
        if (checkIfHomePage()) setTheme(window.scrollY >= 650)
      };

Make sure to define the checkIfHomePage function, which looks something like this:

function checkIfHomePage() {
    return window.location.href.indexOf("your home url") === 0;
}

Utilize the useLocation hook to gain access to the current pathname value and use the matchPath utility to check if the current pathname matches a specific path, such as a "home page" on "/". The pathname should be included as a dependency in the useEffect hook to update the current pathname value within the changeColor function when setting up the scroll event listeners.

Example:

import React, { useState, useEffect } from "react";
import { Link, matchPath, useLocation } from "react-router-dom";

...

const { pathname } = useLocation();

useEffect(() => {
  const changeColour = () => {
    const isHome = matchPath("/", pathname);
    
    setColour(isHome && window.scrollY >= 650);
  };

  // Check for initial scroll position
  changeColour();
  window.addEventListener("scroll", changeColour);

  return () => {
    window.removeEventListener("scroll", changeColour);
  };
}, [pathname]);

...

Complete code:

import React, { useState, useEffect } from "react";
import { Link, matchPath, useLocation } from "react-router-dom";

const navigation = [
  { _id: 100, title: "HOME", href: "/" },
  { _id: 101, title: "ABOUT US", href: "/AboutUs" },
  { _id: 102, title: "SHOP", href: "/Shop" },
  { _id: 103, title: "MENU", href: "/Menu" },
  { _id: 104, title: "CONTACT US", href: "/ContactUs" }
];

const Navbar = () => {
  const { pathname } = useLocation();

  const state = useState();
  const [colour, setColour] = useState(false);

  useEffect(() => {
    const changeColour = () => {
      const isHome = matchPath("/", pathname);

      setColour(isHome && window.scrollY >= 650);
    };

    changeColour();
    window.addEventListener("scroll", changeColour);

    return () => {
      window.removeEventListener("scroll", changeColour);
    };
  }, [pathname]);

  return (
    <div className={colour ? "navbar navbarbg" : "navbar"}>
      <div className="container">
        <Logo />
        <ul
          className={
            colour ? "nav-list-beige nav-list-green" : "nav-list-beige"
          }
        >
          {navigation.map((item) => (
            <Link to={item?.href} key={item._id}>
              <li className={colour ? "nav-link nav-link-colour" : "nav-link"}>
                {item?.title}
                <span
                  className={`${item?.href === state && "style=color: blue;"}`}
                ></span>
              </li>
            </Link>
          ))}
        </ul>
        <div></div>
      </div>
    </div>
  );
};

This is the solution I came up with to make it work eventually. I believe there might be a more efficient way to create variables for each page, but here's what I have accomplished so far:

Navbar.jsx

const Navbar = () => {
    const { pathname } = useLocation();

    const state = useState()
    const [colour, setColour] = useState(false)

    useEffect(() => {
      const changeColour = () => {
       //variables created for each specific page based on the pathname
        const isHome = matchPath("/", pathname)
        const isAboutUs = matchPath("/AboutUs", pathname)

        // conditional statements for different scroll effects on each page
        if (isHome && window.scrollY >= 650) {
          setColour(true)
        } else if (isAboutUs && window.scrollY >= 0) {
          setColour(true)
        } else {
          setColour(false)
        }
      };
      
  
      changeColour();
      window.addEventListener('scroll', changeColour);

      return () => {
        window.removeEventListener('scroll', changeColour)
      }
    }, [pathname])

Full code:

'use client'

import React, { useState, useEffect } from 'react'
import { Link, matchPath, useLocation } from 'react-router-dom'
import Logo from './Logo.jsx'
import '../App.css'

// Array containing all required navlinks for mapping
const navigation = [ 
  {_id:102, title: 'ABOUT US', href: '/AboutUs'},
  {_id:103, title: 'SHOP', href: '/Shop'},
  {_id:104, title: 'MENU', href: '/Menu'},
  {_id:105, title: 'CONTACT US', href: '/ContactUs'},
];

const Navbar = () => {
    const { pathname } = useLocation();

    const state = useState()
    const [colour, setColour] = useState(false)

    useEffect(() => {
      const changeColour = () => {
        const isHome = matchPath("/", pathname)
        const isAboutUs = matchPath("/AboutUs", pathname)

        if (isHome && window.scrollY >= 650) {
          setColour(true)
        } else if (isAboutUs && window.scrollY >= 0) {
          setColour(true)
        } else {
          setColour(false)
        }
      };
      
      changeColour();
      window.addEventListener('scroll', changeColour);

      return () => {
        window.removeEventListener('scroll', changeColour)
      }
    }, [pathname])
    
  return (
    <div className={colour ? 'navbar navbarbg' : 'navbar'}>
      <div className="container">
        <Logo />
        <ul className={colour ? 'nav-list-beige nav-list-green' : 'nav-list-beige'}
          >
          {
            navigation.map((item) => (
              <Link to={item?.href} key={item._id}>
                <li className={`${item?.href === pathname && 'color: hsl(96, 24%, 44%)'}`}>
                  {item?.title}
                  <span className={`${item?.href === pathname && 'color: hsl(96, 24%, 44%)'}`}></span>
                </li>
              </Link>
            ))
          }
        </ul>
        <div>
          
        </div>
      </div>
    </div>
  )
}

export default Navbar