Unknown Your focus-trap must have at least one container with at least one tabbable node in it at all times error

I am using this focus-trap library for my menu, but I am getting the Your focus-trap must have at least one container with at least one tabbable node in it at all times and I can’t see why when I have a single child container and many links within.

<FocusTrap active={menuIsOpen}>
                    <div className="xl:grid xl:grid-cols-24" id="menu">

                        <nav className="xl:col-start-2 xl:col-span-22">
                            <ul className="title-5 text-left space-y-4">
                                {menuItems?.map((item, n) => (
                                    <li key={n}>
                                        <Link href={`/${item.nodeUri}`}><a className="hover:text-blue transition-colors">{item.title}</a></Link>
                                    </li>
                                ))}
                            </ul>
                            <div className="mt-6">
                                <SocialAccounts socialAccounts={socialAccounts} />
                            </div>
                        </nav>

                        <button className="absolute -transform-x-1/2 flex items-center justify-center bg-deep-600 bg-opacity-30 top-6 right-6 xl:top-12 xl:right-12 hover:bg-opacity-100 transition-colors rounded-md w-12 h-12 md:h-14 md:w-14 xl:w-16 xl:h-16" onClick={()=>{setMenuIsOpen(false)}}>
                            <span className="sr-only">Close menu</span>
                            <XMarkIcon className="h-6 w-6 md:w-8 md:h-8 xl:w-12 xl:h-12" />
                        </button>

                    </div>
                </FocusTrap>