Cannot Get OnMouseLeave To Close PopOver Panel

[donhook]

I am trying to get the PopOver Panel to close using the onMouseLeave event. I can get my panel to open using onMouseEnter.

Any insight would be appreciated.

Here is a link to the codesandbox

https://dc418.csb.app/

Here is the code.

import React from "react";
import { useRef, useState, Fragment } from "react";
import Image from "next/image";
//import Navbar from 'react-bootstrap/Navbar';
//import Nav from 'react-bootstrap/Nav';
//import NavDropdown from 'react-bootstrap/NavDropdown';
import Link from "next/link";
import { Popover, Transition } from "@headlessui/react";
import { FaChevronDown } from "react-icons/fa";
import Test from "./Test";
import Batman from "./Batman";
import FlyOutMenu from "./FlyOutMenu"

const solutions = [
{
name: "Insights",
description: "Measure actions your users take",
href: "##",
icon: IconOne,
},
{
name: "Automations",
description: "Create your own targeted content",
href: "##",
icon: IconTwo,
},
{
name: "Reports",
description: "Keep track of your growth",
href: "##",
icon: IconThree,
},
];

export default function Header() {
const buttonRef = useRef(null);
const panelRef = useRef(null);
const useHover = true;
const timeoutDuration = 200;
const [displayMenu, setDisplayMenu] = useState(false);
//const element= document.getElementById("flyout-menu");
let timeout;

function openPopover(e) {
//e.target.style.background = 'red';
//Popover.Button.popoverState = 0;
//this.buttonRef.click();
//buttonRef && buttonRef.current.click();
}
const openMenu = () => {
//console.log("In open menu");
buttonRef && buttonRef.current.click();
};
const closeMenu = () => {
console.log("In Close Menu - panelRef= " + panelRef);

panelRef &&
panelRef.current?.dispatchEvent(
  new KeyboardEvent("keydown", {
    key: "Escape",
    bubbles: true,
    cancelable: true,
  })
);

console.log("In Close Menu At end - panelRef= " + panelRef)
};

const onMouseEnter = (closed) => {
//console.log("In onMouseEnter - closed = " + closed);
clearTimeout(timeout);
//console.log("In onMouseEnter - Called OpenMenu");
closed && openMenu();
//console.log("In onMouseEnter At End - closed = " + closed);
};

const onMouseLeave = (open, debug) => {
//console.log("In onMouseLeave - closed = " + closed + " Open = " + open);
open && (timeout = setTimeout(() => closeMenu(), timeoutDuration));
//console.log("In onMouseLeave - At End closed = " + closed + " Open = " + open);
};

return (

HOME

<div className="text-primary px-5" onMouseEnter={() => setDisplayMenu(true)}>

WHAT WE DO

{({ displayMenu}) => (
<>

<div onMouseLeave={() => setDisplayMenu(false)}>
✅ Alphanumeric Characters


⛔️ *

</>
)}

      <Popover id="flyout-menu" className="relative">
        {({ open}) => (
          <>
              
            <Popover.Button
            ref={buttonRef}
            //onClick={openMenu}
            onMouseEnter={() => useHover && onMouseEnter(!open)}
            as="button"
            className={`
                            ${open ? "" : "text-opacity-90"}
                            text-primary group bg-orange-700 px-3 py-2 rounded-md inline-flex items-center text-base font-medium hover:text-opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75`}
            >
            <span>Solutions</span>
            <FaChevronDown
                className={`${open ? "" : "text-opacity-70"}
                            ml-2 h-5 w-5 text-orange-300 group-hover:text-opacity-80 transition ease-in-out duration-150`}
                aria-hidden="true"
            />
            </Popover.Button>

            <Transition
              as={Fragment}
              enter="transition ease-out duration-200"
              enterFrom="opacity-0 translate-y-1"
              enterTo="opacity-100 translate-y-0"
              leave="transition ease-in duration-150"
              leaveFrom="opacity-100 translate-y-0"
              leaveTo="opacity-0 translate-y-1"
            >
              <Popover.Panel
                ref={panelRef}
                //onMouseLeave={() => useHover && onMouseLeave(open, "1")}
                onMouseLeave={ () => close() }
                className="absolute z-10 w-screen max-w-sm px-4 mt-3 transform -translate-x-1/2 left-1/2 sm:px-0 lg:max-w-3xl"
              >
                <div className="flex">
                  <div className="overflow-hidden rounded-l-lg ">
                    <div id="business-consulting" className="relative grid gap-8 bg-primary p-7">
                      <a
                        href="/strategy"
                        className="flex items-center p-2 -m-3 transition duration-150 ease-in-out rounded-lg hover:bg-gray-50 focus:outline-none focus-visible:ring focus-visible:ring-orange-500 focus-visible:ring-opacity-50"
                      >
                        <div className="flex items-center justify-center flex-shrink-0 w-10 h-10 text-primary sm:h-12 sm:w-12">
                          <IconOne aria-hidden="true" />
                        </div>
                        <div className="ml-4">
                          <p className="text-sm font-medium text-gray-900">
                            Business Consulting
                          </p>
                          <p className="text-sm text-gray-500">
                            Strategy Description
                          </p>
                        </div>
                      </a>
                    </div>
                    <div id="enterprise-applications" className="relative grid gap-8 bg-white p-7">
                      <a
                        href="/strategy"
                        className="flex items-center p-2 -m-3 transition duration-150 ease-in-out rounded-lg hover:bg-gray-50 focus:outline-none focus-visible:ring focus-visible:ring-orange-500 focus-visible:ring-opacity-50"
                      >
                        <div className="flex items-center justify-center flex-shrink-0 w-10 h-10 text-primary sm:h-12 sm:w-12">
                          <IconTwo aria-hidden="true" />
                        </div>
                        <div className="ml-4">
                          <p className="text-sm font-medium text-gray-900">
                            Enterprise Applications
                          </p>
                          <p className="text-sm text-gray-500">
                            Strategy Description
                          </p>
                        </div>
                      </a>
                    </div>
                    <div id="strategy" className="relative grid gap-8 bg-white p-7 ">
                      <a
                        href="/strategy"
                        className="flex items-center p-2 -m-3 transition duration-150 ease-in-out rounded-lg hover:bg-gray-50 focus:outline-none focus-visible:ring focus-visible:ring-orange-500 focus-visible:ring-opacity-50"
                      >
                        <div className="flex items-center justify-center flex-shrink-0 w-10 h-10 text-primary sm:h-12 sm:w-12">
                          <IconThree aria-hidden="true" />
                        </div>
                        <div className="ml-4">
                          <p className="text-sm font-medium text-gray-900">
                            Strategy
                          </p>
                          <p className="text-sm text-gray-500">
                            Strategy Description
                          </p>
                        </div>
                      </a>
                    </div>
                    <div id="technology-enablement" className="relative grid gap-8 bg-white p-7 ">
                      <a
                        href="/strategy"
                        className="flex items-center p-2 -m-3 transition duration-150 ease-in-out rounded-lg hover:bg-gray-50 focus:outline-none focus-visible:ring focus-visible:ring-orange-500 focus-visible:ring-opacity-50"
                      >
                        <div className="flex items-center justify-center flex-shrink-0 w-10 h-10 text-primary sm:h-12 sm:w-12">
                          <IconThree aria-hidden="true" />
                        </div>
                        <div className="ml-4">
                          <p className="text-sm font-medium text-gray-900">
                            Technology Enablement
                          </p>
                          <p className="text-sm text-gray-500">
                            Strategy Description
                          </p>
                        </div>
                      </a>
                    </div>
                  </div>
                  <div className="overflow-hidden bg-white rounded-r-lg shadow-lg ring-1 ring-black ring-opacity-5">
                    <p className="text-sm font-medium text-gray-900">
                      RIght Side Header
                    </p>
                    <p className="text-sm text-gray-500">
                      Right Side decsription
                    </p>
                  </div>
                </div>
                
              </Popover.Panel>
            </Transition>
          </>
        )}
      </Popover>
      <div className="text-primary px-5">
        <Link href="/who-we-are">
          <a>WHO WE ARE</a>
        </Link>
      </div>
      <div className="text-primary px-5">
        <Link href="/insights">
          <a>INSIGHTS</a>
        </Link>
      </div>
      <div className="text-primary px-5">
        <Link href="/about">
          <a>ABOUT US</a>
        </Link>
      </div>
      <div className="text-primary px-5">
        <Link href="/contact-us">
          <a>CONTACT US</a>
        </Link>
      </div>
    </div>
  </div>
</nav>

);
}

function IconOne() {
return (






);
}

function IconTwo() {
return (





);
}

function IconThree() {
return (









);
}