How can I mock render the headless UI component in react testing?

I'm writing a test to render my App component in the child there's a dashboard component where I'm using headless UI it working fine on localhost but getting undefined components on rendering on test how can I render them?

I'm trying to mock the render but no success yet it always rendering as undefined

App.test

import { render } from '@testing-library/react';
import { SnackbarProvider } from 'notistack';
import React from 'react';
import { Provider } from 'react-redux';
import { MemoryRouter } from 'react-router-dom';
import { applyMiddleware, createStore } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunk from 'redux-thunk';
import App from './App';
// import { rootReducer } from './store';
jest.mock('@headlessui/react', () => ({
  ...jest.requireActual('@headlessui/react'),
}));
describe('', () => {
  function renderApp(
    store = {},
    //  createStore(
    //   rootReducer,
    //   {},
    //   composeWithDevTools(applyMiddleware(thunk))
    // ),
    props = {}
  ) {
    return render(
      <SnackbarProvider>
        <MemoryRouter>
          {/* <Provider store={store}> */}
          <App />
          {/* </Provider> */}
        </MemoryRouter>
      </SnackbarProvider>
    );
  }

  test('test render app component', async () => {
    renderApp();
  });
});

Component failing on test

import React, { Fragment, useState, useMemo, useEffect } from 'react';
import { Menu, Transition } from '@headlessui/react';
import { ChevronDownIcon } from '@heroicons/react/solid';
// import { useSelector, useDispatch } from 'react-redux';
// import types from '../../store/actions/types';
// NOTE - for ref this is happening globally now
// and it has the global styles taken out of it
// so it doesn't mess with other stuff hopefully
// import './tailwind-style.scss'

function classNames(...classes) {
  return classes.filter(Boolean).join(' ');
}

const AdvertSwitch = () => {
  console.log({ Menu, Transition });

  // const dispatch = useDispatch()

  const advertisersFromState = [
    {
      id: 1,
      name: 'advertiser-one',
    },
    {
      id: 2,
      name: 'advertiser-two',
    },
  ];

  const advertisers = advertisersFromState;

  const selectedAdvertiser = advertisersFromState[0];

  const handleAdvertSwitch = (advertiser) => {
    console.log('handle advertiser switch', advertiser);
  };

  const showMultiple = true;

  const Single = () => {
    return (
      <div className="">
        <div>{selectedAdvertiser?.name ?? 'loading...'}</div>
      </div>
    );
  };

  const Multiple = () => {
    // } else {
    return (
      <div className="w-full bg-gray-200 flex justify-end">
        <Menu as="div" className="ml-3 z-10 relative inline-block text-left">
          <div>
            <Menu.Button className="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-transparent ">
              {selectedAdvertiser?.name ?? 'loading...'}
              <ChevronDownIcon
                className="-mr-1 ml-2 h-5 w-5"
                aria-hidden="true"
              />
            </Menu.Button>
          </div>

          <Transition
            as={Fragment}
            enter="transition ease-out duration-100"
            enterFrom="transform opacity-0 scale-95"
            enterTo="transform opacity-100 scale-100"
            leave="transition ease-in duration-75"
            leaveFrom="transform opacity-100 scale-100"
            leaveTo="transform opacity-0 scale-95"
          >
            <Menu.Items className="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
              <hr className="h-1 p-0 m-0" />
              <div className="py-1">
                {advertisers.map((advertiser) => {
                  return (
                    <Menu.Item key={advertiser.id}>
                      {({ active }) => (
                        <div
                          className={classNames(
                            active
                              ? 'bg-gray-100 text-gray-900'
                              : 'text-gray-700',
                            'block px-4 py-2 text-sm'
                          )}
                          onClick={() => handleAdvertSwitch(advertiser)}
                        >
                          {advertiser?.name ?? 'loading...'}
                        </div>
                      )}
                    </Menu.Item>
                  );
                })}
              </div>
            </Menu.Items>
          </Transition>
        </Menu>
      </div>
    );
  };

  return (
    <div className="mr-2">
      {showMultiple && <Multiple />}
      {!showMultiple && <Single />}
    </div>
  );
};

export default AdvertSwitch;

Failing Test Snap