What am I doing wrong with my Dusk Test

I am working with a Laravel 10 Inertia React Stack. I have a dropDown made using the boiler plate scaffolded DropDown button that comes with breeze React install as `<div className="filterButtons"> <Dropdown> <Dropdown.Trigger > <span className="inline-flex rounded-xl"> <button dusk="categoriesButton" type="button" className="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:text-gray-700 focus:outline-none transition ease-in-out duration-150" > Category

            <svg
              className="ml-2 -mr-0.5 h-4 w-4"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 20 20"
              fill="currentColor"
            >
              <path
                fillRule="evenodd"
                d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                clipRule="evenodd"
              />
            </svg>
          </button>
        </span>
      </Dropdown.Trigger>
      <Dropdown.Content>
        {categories.map((category) => (
          <Dropdown.Link
            {...(category.id == 1 ? { dusk: "Category1Button" } : null)}
            key={category.id}
            className="text-center"
            href={route('idea.index')}
            method="post"
            as="button"
            onClick={(e) => handleCategorySelect(e, category)}>
            {category.name}
          </Dropdown.Link>
        ))}

      </Dropdown.Content>
    </Dropdown>`

and for the dusk selector Category1Button I am trying to write the following test. I want to check my pagination if they are showing the intended links, but somehow I just can not get the DropDown Link to get via dusk selectors if I do it using ->whenAvialable method I am getting InvalidArgumentException Unable to locate button [@Category1Button] and when I am doing the other way round I am getting ElementClickInterceptedException element click intercepted: Element <p dusk="pagination...Button" class="capitalize text-center text-lg">Next</p> is not clickable at point (1365, 929). Other element would receive the click: <div class="fixed inset-0 z-40"></div>

any help would be appreciated

The test in question has

$this->browse(function (Browser $browser) use ($ideaLastInDisplay) {
            $browser->visit("/")
                ->waitFor("@categoriesButton", 20)
                ->press("@categoriesButton")
                ->screenshot("errorStaleElement")
                // ->whenAvailable("@Category1Button", function (Browser $browser) use ($ideaLastInDisplay) {
                //     $browser->screenshot("category1Pressed")
                //         ->press("@Category1Button");
                //     // ->screenshot("screenWhencategorySelected")
                //     // ->waitFor("@ideaOnTopOfPage", 20)
                //     // ->press("@@paginationNextButton")
                //     // ->waitForTextIn("@titleOnTopOfPage", $ideaLastInDisplay->title, 20)
                //     // ->waitForTextIn("@descriptionOnTopOfPage", $ideaLastInDisplay->description, 20)
                //     // ->screenshot("allIdeaCategoryPaginationNext");
                // }, 20)
                // ->waitFor("@Category1Button", 20)
                // ->click("@Category1Button")
                // ->waitFor("@ideaOnTopOfPage", 20)
                ->pause(20000)
                ->press("@paginationNextButton")
                ->waitForTextIn("@titleOnTopOfPage", $ideaLastInDisplay->title, 20)
                ->waitForTextIn("@descriptionOnTopOfPage", $ideaLastInDisplay->description, 20);
        });

the pagination link where the dusk selector is `<Link

                className={`w-40 ml-2 py-3 px-4 ${isLastPage ? "bg-gray-50 border-2 border-green-400" : "bg-gray-200 hover:bg-gray-400 border-green-400"}  transition transition-duration-150 ease-in  flex justify-center items-center rounded-xl`}
                as="button" href={ifPathHasParam ? customNextPageUrl : next_page_url}
                disabled={isLastPage}
            >
                <span className="inline-flex items-center">
                    <p dusk="paginationNextButton" className="capitalize text-center text-lg">Next</p>
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
                        <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
                    </svg>
                </span>
            </Link>`