Getting a "There are no focusable elements inside the <FocusTrap />" error inside next.js app

Question

I am trying to run this code but getting this error, I want to create a button that opens a headless UI. I have tried to add the ref and initialFocus but it did not help, I have also tried to copy the code from the headless UI modal example and put it inside the Feed component but it did not work also

Index.js

export default function Home({ providers }) {
  const { data: session } = useSession();
  const [commentModal, setCommentModal] = useRecoilState(commentModalState);

  const sendData = async () => {
    setDoc(doc(db, "users", session.user.uid), {
      id: session.user.uid,
      name: session.user.realname,
      username: session.user.username,
      email: session.user.email,
      last_updated: serverTimestamp(),
    });
  };

  if (!session) return <Login providers={providers} />;
  return (
    
    <div className={`${sendData()}`}>
      <Feed/>
      <Modal/>
    </div>
  );
}

export async function getServerSideProps(context) {
  const providers = await getProviders();
  const session = await getSession(context);

  return {
    props: {
      providers,
      session,
    },
  };
}

Feed.js

function Feed() {
  const [commentModal, setCommentModal] = useRecoilState(commentModalState);

  return (
    <div>
      <button
        class="relative p-0.5 inline-flex items-center justify-center font-bold overflow-hidden group rounded-md"
        onClick={() => {
          setCommentModal(true);
        }}
      >
        <span class="w-full h-full bg-gradient-to-br from-[#ff8a05] via-[#ff5478] to-[#ff00c6] group-hover:from-[#ff00c6] group-hover:via-[#ff5478] group-hover:to-[#ff8a05] absolute"></span>
        <span class="relative px-6 py-3 transition-all ease-out bg-gray-900 rounded-md group-hover:bg-opacity-0 duration-400">
          <span class="relative text-white">POST</span>
        </span>
      </button>
    </div>
  );
}

export default Feed;

Modal.js

function Modal() {
  const [commentModal, setCommentModal] = useRecoilState(commentModalState);

  return (
    <Transition.Root show={commentModal} as={Fragment}>
      <Dialog
        as="div"
        className="fixed z-50 inset-0 pt-8"
        onClose={setCommentModal}
      >
        <div className="flex items-start justify-center min-h-[800px] sm:min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
          <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"
          >
            <Dialog.Overlay className="fixed inset-0 bg-[#5b7083] bg-opacity-100 transition-opacity" />
          </Transition.Child>

          <Transition.Child
            as={Fragment}
            enter="ease-out duration-300"
            enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
            enterTo="opacity-100 translate-y-0 sm:scale-100"
            leave="ease-in duration-200"
            leaveFrom="opacity-100 translate-y-0 sm:scale-100"
            leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
          >
            <div>
            </div>
          </Transition.Child>
        </div>
      </Dialog>
    </Transition.Root>
  );
}

export default Modal;