How to Highlight the DropZones whenever the dragging is happened-react dnd

Question

In the below code i want to add a function that helps me in highlighting the dropzones when user drags widget . I want to give the suggestions where the user can actually can drop them

import { useDrag, useDrop } from 'react-dnd';

interface BoxProps {
  children: JSX.Element;
  id: string;
  handleDrop: (dragId: string, dropId: string) => void;
  disableDragging: boolean;
}

interface DragItem {
  id: string;
}

const DraggableWidget = ({ children, id, handleDrop, disableDragging }: BoxProps) => {
  const [{ isDragging }, drag] = useDrag({
    type: 'widget',
    item: { id },
    canDrag: !disableDragging, // Disable dragging based on the disableDragging prop
    collect: (monitor) => ({
      isDragging: monitor.isDragging()
    })
  });
  const [{ isOver, canDrop }, drop] = useDrop({
    accept: 'widget',
    drop: (item: DragItem) => handleDrop(item.id, id),
    collect: (monitor) => ({
      isOver: monitor.isOver(),
      canDrop:monitor.canDrop()
    })
  });

  const active=isOver&&canDrop
  return (
    <div ref={drop}  >
      <div
        ref={drag}
        style={{
          opacity: isDragging ? 0.5 : 1,
          cursor: disableDragging ? 'not-allowed' : 'move' ,// Change cursor based on disableDragging prop
          border:active?"2px solid green":"",
          
          
        }}
      >
       <div>
        {children}
        </div> 
      </div>
    </div>
  );
};

export default DraggableWidget;

I tried using isover&&candrop but it will only work when i hover the widget to another widget,but i am expecting that when any widget dragged even if they do not hover on another widget also it should highlight the drop areas