calling modal popup from another file using next.js

Question

I am new to next.js. I am trying to use the headlessui for the modal however I want to create a dedicated file for the modal so it won't cluster the code in the header/navbar file.

Navbar.js

import { useRouter } from "next/router";
import React, { Fragment, useEffect, useRef, useState } from "react";
import { useAuth } from "../utilities/AuthService";
import { useUtilities } from "./Modal";
import { Dialog, Transition } from "@headlessui/react";
import Link from "next/link";

export default function Header() {
  const [error, setError] = useState(null);
  const router = useRouter();
  const { logout, currentUser } = useAuth();
  let [isOpen, setIsOpen] = useState(false);

  async function logOutHandler() {
    if (!currentUser) {
      console.log(currentUser);
      setError("No Current User");
      return;
    } else {
      try {
        await logout();
        await closeModal();
        router.push("/");
      } catch (error) {
        console.log("erorr");
      }
    }
  }

  return (
    <div className="sticky top-0 w-full left-0 bg-inherit flex items-center justify-between p-4 border-b border-solid border-white">
      <Link href="/">
        <h1 className="text-xl sm:text-lg">Admin Dashboard</h1>
      </Link>
      {!currentUser ? (
        <i className="fa-solid fa-user text-xl duration-300 hover:opacity-40 cursor-pointer sm:text-2xl"></i>
      ) : (
        // Button for Log out
        <button
          type="button"
        // trigger the openModal function from ``Modal.js``
          onClick={openModal}
          className="h-10 px-5 text-white transition-colors duration-150 border border-rose-500 rounded-lg focus:shadow-outline hover:bg-rose-500 hover:text-white"
        >
          Log Out
        </button>
      )}
    </div>
  );
}

Modal.js

import { Dialog, Transition } from '@headlessui/react'
import { Fragment, useState } from 'react'

export default function MyModal() {
  let [isOpen, setIsOpen] = useState(true)
// trigger this
  function closeModal() {
    setIsOpen(false)
  }
// trigger this
  function openModal() {
    setIsOpen(true)
  }

  return (
    <>
     // I want to trigger this.
      <Transition appear show={isOpen} as={Fragment}>
        <Dialog as="div" className="relative z-10" onClose={closeModal}>
          <Transition.Child
            as={Fragment}
            enter="ease-out duration-300"
            enterFrom="opacity-0"
            enterTo="opacity-100"
            leave="ease-in duration-200"
            leaveFrom="opacity-100"
            leaveTo="opacity-0"
          >
            <div className="fixed inset-0 bg-black bg-opacity-25" />
          </Transition.Child>

          <div className="fixed inset-0 overflow-y-auto">
            <div className="flex min-h-full items-center justify-center p-4 text-center">
              <Transition.Child
                as={Fragment}
                enter="ease-out duration-300"
                enterFrom="opacity-0 scale-95"
                enterTo="opacity-100 scale-100"
                leave="ease-in duration-200"
                leaveFrom="opacity-100 scale-100"
                leaveTo="opacity-0 scale-95"
              >
                <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
                  <Dialog.Title
                    as="h3"
                    className="text-lg font-medium leading-6 text-gray-900"
                  >
                    Payment successful
                  </Dialog.Title>
                  <div className="mt-2">
                    <p className="text-sm text-gray-500">
                      Your payment has been successfully submitted. We’ve sent
                      you an email with all of the details of your order.
                    </p>
                  </div>

                  <div className="mt-4">
                    <button
                      type="button"
                      className="inline-flex justify-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
                      onClick={closeModal}
                    >
                      Got it, thanks!
                    </button>
                  </div>
                </Dialog.Panel>
              </Transition.Child>
            </div>
          </div>
        </Dialog>
      </Transition>
    </>
  )
}

I want to trigger the return, when the openModal and closeModal functions has been trigger via the onClick on the button in another file.

I am kind of new in next.js and trying to learn and will appreciate any response!