Scroll Method is passed to Navbar component but it is not working on Onclick method in Navbar component

Question

This image is from About component. I have made a method named ScrollDown and passed it to Navbar component

import React, { useRef } from "react";
import profileone from "../images/profile-1.JPG";
import Typewriter from "typewriter-effect";
import { NavBar } from "./NavBar";

export const About = () => {
  const aboutSection = useRef(null);

 

  const scrollDown = () => {
    console.log("Scroll Method is working");
  };
  
  
  return (
    <div className="about" ref={aboutSection}>
     <div>
      <NavBar ScrollDown={scrollDown }/>
    </div>
      <div className="max-width">
        <h2 className="title">About me</h2>

        <div className="about-content">
          <div className="left">
            <img src={profileone} alt="profile" />
          </div>
          <div className="description">
            <div className="text">
              {" "}
              I'm Usama and I'm a{" "}
              <span>
                <Typewriter
                  options={{
                    strings: ["Developer", "Freelancer", "UI/UX Designer"],
                    autoStart: true,
                    loop: true,
                    delay: 100,
                    deleteSpeed: 60,
                  }}
                />
              </span>{" "}
            </div>
            <p>
              {" "}
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi ut
              voluptatum eveniet doloremque autem excepturi eaque, sit
              laboriosam voluptatem nisi delectus. Facere explicabo hic minus
              accusamus alias fuga nihil dolorum quae. Explicabo illo unde, odio
              consequatur ipsam possimus veritatis, placeat, ab molestiae velit
              inventore exercitationem consequuntur blanditiis omnis beatae.
              Dolor iste excepturi ratione soluta quas culpa voluptatum
              repudiandae harum non.
            </p>
            <a href="/">Download CV</a>
          </div>
        </div>
      </div>
      <div>
      </div>
    </div>
  );
};

This second image is of Navbar component. I have destructured ScrollDown method here and used in Click Me button but the method is not working here as nothing is being printed in console

    import React from "react";
    import { navItems } from "../data";
    import { FaBars, FaTimes, FaAngleUp } from "react-icons/fa";
    import { useState } from 

"react";
import { useEffect } from "react";

export const NavBar = ({ ScrollDown }) => {
  const [isactive, setIsActive] = useState(false);
  const [scrollPosition, setScrollPosition] = useState(0);

  const openSideBar = () => {
    setIsActive(true);
  };

  const closeSideBar = () => {
    setIsActive(false);
  };

  const handleScroll = () => {
    const position = window.scrollY;
    setScrollPosition(position);
  };

  const goToTop = () => {
    window.scrollTo({
      top: 0,
      behavior: "smooth",
    });
  };

  useEffect(() => {
    window.addEventListener("scroll", handleScroll);

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

  return (
    <>
      <div
        className={
          scrollPosition > 500 ? "scroll-up-btn show" : "scroll-up-btn"
        }
      >
        <i>
          <FaAngleUp onClick={goToTop} />
        </i>
      </div>
      <nav className={scrollPosition > 20 ? "navbar sticky" : "navbar "}>
        <div className="max-width ">
          <div className="flex">
            <h1 className="logo">
              Portfo
              <span className={scrollPosition > 20 ? "span-white" : "span"}>
                lio.
              </span>
            </h1>
            <ul className={isactive ? "menu active" : "menu"}>
              {navItems.map((item) => {
                const { id, url, text } = item;
                return (
                  <li key={id}>
                    <a href={url}>{text}</a>
                  </li>
                );
              })}
            </ul>
            <div className="menu-btn">
              {isactive ? (
                <FaTimes onClick={closeSideBar} />
              ) : (
                <FaBars onClick={openSideBar} />
              )}
            </div>
            <button onClick={ScrollDown}>Click me</button>
          </div>
        </div>
      </nav>
    </>
  );
};

Also when I tried to console.log ScrollDown method in Navbar component it showed me this