react beautiful dnd horizontal scroll breaks item selection in dnd

Question

when dragging an item inside container with horizontal scroll using react-beautiful-dnd, selection of item inside bugs and I can't select anything until I delete one item from the list

code from component with DnD

<ScrollBox>
    <Droppable droppableId={droppableId} direction={direction}>
         ...
    </Droppable>
</ScrollBox>

ScrollBox component

 <div
        ref={listContainerRef}
        className={`max-w-full ${
          showOnlyOnMobile
            ? 'overflow-x-hidden xl:overflow-x-auto'
            : 'overflow-x-hidden'
        } relative mt-4`}
      >
        <div ref={listRef} className="whitespace-nowrap w-full flex flex-col">
          {children}
        </div>
      </div>

I have no idea what to try so if anyone ran into this problem, I would appreciate your help so much!