const [dropProps, drop] = useDrop<
    DragItem,
    void,
    { handlerId: Identifier | null }
  >(
    () => ({
      accept: DRAG_ITEM_TYPE.reorderableListItem,
      collect(monitor) {
        return {
          handlerId: monitor.getHandlerId(),
          item: monitor.getItem(),
        }
      },
      hover: (item: DragItem, monitor) => {
        if (!itemRef.current) {
          return
        }
        const dragIndex = item.index
        const hoverIndex = index

        // Don't replace items with themselves
        if (dragIndex === hoverIndex) {
          return
        }
        // Determine rectangle on screen
        const hoverBoundingRect = itemRef.current?.getBoundingClientRect()

        // Get vertical middle
        const hoverMiddleY =
          (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2

        // Determine mouse position
        const clientOffset = monitor.getClientOffset()

        // Get pixels to the top
        const hoverClientY = (clientOffset as any).y - hoverBoundingRect.top
        console.log('hoverClientY',hoverClientY)

        // Only perform the move when the mouse has crossed half of the items height
        // When dragging downwards, only move when the cursor is below 50%
        // When dragging upwards, only move when the cursor is above 50%

        // Dragging downwards
        if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
          return
        }

        // Dragging upwards
        if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
          return
        }

        // Time to actually perform the action
        handleMove(item, hoverIndex)
        scroll(hoverClientY)
        // // Note: we're mutating the monitor item here!
        // // Generally it's better to avoid mutations,
        // // but it's good here for the sake of performance
        // // to avoid expensive index searches.
        item.index = hoverIndex
      },
    }),
    [handleMove, index, id, scroll],
  )

  const scroll = useCallback((lastMouseClientY: number) => {
    if (listRef.current) {
      const position = listRef.current?.getBoundingClientRect()
      const { top, bottom } = position
      const scrollSpeed = 5
      const margin = lastMouseClientY
      if (lastMouseClientY > bottom - margin) {
        console.log('down')
        const nextScrollTop = listRef.current.scrollTop + scrollSpeed
        listRef.current.scrollTo(0, nextScrollTop)
      } else if (lastMouseClientY < top + margin) {
        console.log('up')
        const nextScrollTop = listRef.current.scrollTop - scrollSpeed
        listRef.current.scrollTo(0, nextScrollTop)
      }
    }
  }, [])

I want to trigger scroll when I hover over container, but hover method from useDrop works only while hovering on another item. So, for example, if I will move item to the bottom with drag ( which will satisfy my coordinates condition ) it will be move item in the list and now instead of scroll to the bottom it will hover on itself ( not another item ) and hover will not be triggered ( no scroll ) Could you help me?