How to derive a boolean from `location` in a Function Component

I am practicing my React skills and need some assistance. I have a simple two-page website in which I need to render two reusable button components based on the path location. I have the console logs working showing the correct paths when you navigate the pages, but the boolean values are not changing based on the path: for example, if you are on the home ("/") page then you should see the Owner Login in button and if you are on the gallery ("/gallery") page you should see Search Images button.

My question what am I doing wrong, how do I get the buttons to render conditional based on the path location?

import React, { useState } from "react";
import { useLocation } from "react-router-dom";
import Button from "./Button";

import styles from "./Header.module.css";

const Header = () => {
  const [isOnHomepage, setIsOnHomePage] = useState(false);

  const location = useLocation();
  console.log("currentpath:", location.pathname);

  const homeHandler = () => {
    if (location === "/") {
      setIsOnHomePage(true);
    }
  };
  console.log("status1", isOnHomepage);

  const galleryHandler = () => {
    if (location === "/gallery") {
      setIsOnHomePage(false);
    }
  };

  const buttonAction = () => {
    alert("Hello you clicked me!");
  };
  console.log("status2", isOnHomepage);

  return (
    <header className={styles["header-home"]}>
      <div className={styles["header-logo"]}>GalleryFunnizes!</div>
      {isOnHomepage && (
        <Button onClick={buttonAction} onHomeHandler={homeHandler}>
          Owner Login
        </Button>
      )}
      {!isOnHomepage && (
        <Button onClick={buttonAction} onGalleryHandler={galleryHandler}>
          Search Images
        </Button>
      )}
    </header>
  );
};

export default Header;



import styles from "./Button.module.css";

const Button = (props) => {
  return (
    <button
      className={styles.button}
      type={props.type || "button"}
      onClick={props.onClick}
    >
      {props.children}
    </button>
  );
};

export default Button;