Integration with Headless UI popover not working as expected.

[er-santosh]

I have implemented a infinite scroll with a popover of https://headlessui.com/react/popover and infiniteReactQuery. Whenever i scroll the popover content the next prop is not called instead it is called when i scroll the whole page. I have used the scrollableTarget with id and useRef too but no luck. Is there anyway to handle this. I can provide the code snippet.

` <Popover className={"relative"}> {({ close }) => ( <> <Popover.Button className={ "focus:outline-none relative flex items-center justify-center" }>

        <div className="laptop:hidden">
          <BellSmallIcon />
        </div>
        <span className="absolute -top-2 -right-2 laptop:top-0 laptop:right-0 flex items-center justify-center rounded-full text-white h-5 w-5 laptop:h-[25px] laptop:w-[25px] bg-gradient-to-r from-seafoam to-aquaBlue">
          {queryData?.notifications?.length || 0}
        </span>
      </Popover.Button>
      <Transition
        enter="transition ease-out duration-200"
        enterFrom="opacity-0 translate-y-1"
        enterTo="opacity-100 translate-y-0"
        leave="transition ease-in duration-150"
        leaveFrom="opacity-100 translate-y-0"
        leaveTo="opacity-0 translate-y-1">
        {" "}
        <Popover.Panel
          ref={scrollableDivRef}
          className="absolute w-[320px] tablet:w-[400px] right-0 max-h-[550px] overflow-y-auto scrollbar-hide z-10 px-4 pb-4 transform bg-white shadow-large rounded-normal">
          <InfiniteScroll
            dataLength={queryData ? queryData?.notifications.length : 0}
            next={() => {
              fetchNextPage();
            }}
            hasMore={!!hasNextPage}
            loader={<FetchingLoader />}
            scrollableTarget={scrollableDivRef.current as ReactNode}>
            {queryData?.notifications &&
            queryData?.notifications?.length ? (
              <>
                {(queryData?.notifications as INotification[])?.map(
                  (notification, key) => (
                    <button
                      key={key}
                      onClick={close}
                      className={twMerge(
                        "shadow-medium group rounded-normal bg-white pl-[27px] pr-5 py-[15px] flex items-center space-x-[19px] w-full mt-2"
                      )}>
                      {/* <div
                      className={
                        "h-[50px] relative w-[50px] rounded-normal shadow-large group-hover:text-primary bg-[#D8EEFF] flex items-center justify-center fill text-black"
                      }>
                      <NextImage
                        alt={"notification"}
                        src={"/assets/icons/BellSmall.svg"}
                        className="w-6 h-6 mt-1 ml-1"
                      />
                    </div> */}
                      <div className="flex items-end justify-between flex-1">
                        <div className="flex items-end justify-between flex-1 text-[11px] leading-[16.5px] tablet:text-sm desktop:text-base">
                          <div className="w-full">
                            <h2 className="text-start font-medium text-[#0B0320] flex items-center space-x-3">
                              <span>{notification.title}</span>
                            </h2>
                            <div className="flex items-end justify-between mt-2">
                              <p className="text-start text-[8px] leading-[12px] tablet:text-xs desktop:text-sm">
                                {notification.message}
                              </p>
                              <h3 className="text-end text-[#19163D] font-medium min-w-max ml-[28px]">
                                {
                                  formatDateToNepaTZ(
                                    notification.created_at
                                  )?.date
                                }
                              </h3>
                            </div>
                          </div>
                        </div>
                      </div>
                    </button>
                  )
                )}
              </>
            ) : (
              <p className="py-10 font-medium text-center tablet:text-base">
                No notifications found{" "}
              </p>
            )}
          </InfiniteScroll>
        </Popover.Panel>
      </Transition>
    </>
  )}
</Popover>`