How to open a modal with Action->perform() method ?

[jameswong3388]

I have an action where it opens up a SignInModal, but the thing is, how can we use the state outside of that component?

// _app.tsx

import { SignInModal } from '../components/Auth'

export default function App({
  Component,
  pageProps: { session, ...pageProps },
  router,
}) {

  //

  return (
    <SessionProvider session={session}>
      <KBarProvider
        options={{
          enableHistory: true,
        }}
      >
        <div className="fixed inset-0 flex justify-center sm:px-8">
          <div className="flex w-full max-w-7xl lg:px-8">
            <div className="w-full bg-white ring-1 ring-zinc-100 dark:bg-zinc-900 dark:ring-zinc-300/20" />
          </div>
        </div>
        <div className="relative">
          <Header />
          <main>
            <Component previousPathname={previousPathname} {...pageProps} />
            <SignInModal ref={myRef}/>
          </main>
          <Footer />
        </div>
        <Analytics />
        <CommandPaletteBase />
        <Toaster />
      </KBarProvider>
    </SessionProvider>
  )
}

// useAuthActions.tsx

import { useRegisterActions, Priority } from 'kbar'
import * as React from 'react'
import {useRef} from "react";

export default function useThemeActions() {
  const myRef = useRef()
  useRegisterActions([
    {
      id: 'signIn',
      name: 'Sign In',
      keywords: 'Sign In ',
      section: 'Auth',
      icon: <UserCircleIcon className="h-5 w-5" />,
      priority: Priority.LOW,
      perform: () => {
        // how do I trigger the modal here ?
      },
    },
  ])
}

// SignInModal.tsx

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

export const SignInModal = () => {
  let [isOpen, setIsOpen] = useState(true)

  function closeModal() {
    setIsOpen(false)
  }

  return (
    <>
      // DIaLog
    </>
  )
})