draggable item disappear on drag #35

function AreaContainer({ area }: AreaProps) {
const [activeId, setActiveId] = useState<string | null>(null);
const [overId, setOverId] = useState<string | null>(null);
const { setNodeRef } = useDroppable({
   id: area.id,
   data: {
     type: "Area",
     area,
   },
});

  useDndMonitor({
     onDragStart(event) {
      setActiveId(event.active.id.toString());
  },
   onDragEnd(event) {
      setActiveId(null);
    },
   onDragOver(event) {
     setOverId(event.over?.id.toString() ?? null);
    },
   onDragCancel(event) {
      setOverId(null);
      setActiveId(null);
     },
 });

  const branch = branchesData.find((branch) => branch.id === +activeId!);

   return (
        <Card key={area.id} className="flex flex-col gap-4" ref={setNodeRef}>
              <CardHeader className="border-b">
                    <CardTitle>Area: {area.name}</CardTitle>
                    <CardDescription>Senior area manager Name</CardDescription>
             </CardHeader>
           <CardContent className="flex flex-col gap-4">
                  {branchesData
                        .filter((branch) => branch.area === area.id)
                        .map((branch) => (
                                <BranchContainer branch={branch} key={branch.id} />
                   ))}

             <DragOverlay>
                   {activeId ? (
                          <Badge className="w-full py-3" variant="secondary">
                                  {branch?.name}
                          </Badge>
                      ) : null}
             </DragOverlay>
         </CardContent>
      </Card>
   );
 }