Can we stop pop over panel from scrolling?

Question

I've tried a lot of ways through tailwind properties like overflow: auto, overscroll: none, fixed (as in CSS position-fixed) and static. But everytime the popover panel just scrolls to the other page content which is downwards. Here is the code:

<transition
      enter-active-class="duration-200 ease-out"
      enter-from-class="opacity-0 scale-95"
      enter-to-class="opacity-100 scale-100"
      leave-active-class="duration-100 ease-in"
      leave-from-class="opacity-100 scale-100"
      leave-to-class="opacity-0 scale-95"
    >
      <PopoverPanel
        focus
        class="bg-white fixed h-auto absolute top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden overflow-hidden"
      >
        <div class="bg-white bg-white divide-y-2 divide-gray-50">
          <div class="">
            <div class="flex items-center justify-between">
              <div class="mt-17 ml-15">
                <BrandLogo class="w-24 h-24" />
              </div>
              <div class="mr-2">
                <PopoverButton
                  class="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
                >
                  <span class="sr-only">Close menu</span>
                  <XIcon class="h-6 w-6" aria-hidden="true" />
                </PopoverButton>
              </div>
            </div>
          </div>
          <div class="py-6 space-y-6">
            <div class="h-10"></div>
            <div class="flex flex-col float-right space-y-4">
              <div class="m-5 flex flex-col float-right">
                <NuxtLink
                  v-for="item in navigation.solutions"
                  :key="item.name"
                  :to="item.to"
                  class="text-base color-[#202020] mb-3 font-nunito text-gray-900 hover:text-gray-700"
                >
                  {{ item.name }}
                </NuxtLink>
              </div>
              <div class="h-5"></div>
              <div class="m-6">
                <select
                  class="form-select w-18 h-12 rounded-lg block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding bg-no-repeat border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"
                  id="language"
                >
                  <option>EN</option>
                  <option>DE</option>
                  <option>RU</option>
                  <option>UA</option>
                </select>
              </div>
              <br />
              <div class="h-10"></div>
              <br />
              <div
                class="flex flex-col float-right m-10 space-y-3 overflow-y-clip"
              >
                <a
                  v-for="item in navigation.social"
                  :key="item.name"
                  :href="item.href"
                  class="text-black hover:text-gray-500"
                >
                  <span class="sr-only">{{ item.name }}</span>
                  <component
                    :is="item.icon"
                    class="h-6 w-6"
                    aria-hidden="true"
                  />
                </a>
              </div>
              <div class="h-20"></div>
              <br />
            </div>
          </div>
        </div>
      </PopoverPanel>
    </transition>

After Scrolling down, below is the screenshot for the same.

So, I don't want that popover to get scrolled, as for now it scrolls to show the 'Our mission' text followed by other content on the page