I cannot drag the item that I dragged once with react-dnd again.

import React, {useRef, useState} from "react";
import {DndProvider, useDrag, useDrop} from "react-dnd";
import {HTML5Backend} from "react-dnd-html5-backend";

import "./style.css";

const MovableItem=({setIsFirstColumn,name})=>{
  const [{isDragging},drag] = useDrag({
    type: "what",
    item: {name},
    // work when a drug is released
    end: (item, monitor) = > {
      constdropResult=monitor.getDropResult();
      console.log("first", dropResult);
      // If you release it on Column 1, Column 1 will enter the name and it will be true.
      // otherwise become undefined
      if(dropResult&dropResult.name==="Column1"){
        console.log("To Column 1";
        setIsFirstColumn(true);
      } else{
        console.log("To Column 2");
        setIsFirstColumn(false);
      }
    },
    collect:(monitor)=>({
      isDragging —monitor.isDragging()
    })
  });
  constopacity=isDragging?0.4:1;
  return(
    <div ref={drag}className="movable-item" style={{opacity}}>
      We will move this item
    </div>
  );
};

constColumn=({children,className,title})=>{
  const [{canDrop, isOver}, drop] = useDrop({
    // Allow what type to be moved to a column
    accept: "what",
    // Specify where components can be dropped
    drop:()=>({name:title}),
    collect:(monitor)=>({
      isOver:!!monitor.isOver(),
      canDrop:!!monitor.canDrop()
    })
  });
  console.log("options", {canDrop, isOver});
  return(
    <div ref={drop}className={className}>
      {title}
      {children}
    </div>
  );
};

export const App=()=>{
  const [isFirstColumn, setIsFirstColumn] = useState(true);
  const Item=(
    <MovableItem setIsFirstColumn={setIsFirstColumn} name={"hello"}/>
  );
  return(
    <div className="container">
      <DndProvider backend={HTML5Backend}>
        <Column title="Column1" className="column first-column">
          {/*If the state is true, pass the component to be dragged*/}
          {isFirstColumn & Item}
        </Column>
        <Column title="Column2" className="column second-column">
          {console.log("haha", isFirstColumn)}
          {!isFirstColumn&Item}
        </Column>
        <button
          onClick={()=>{
            setIsFirstColumn(!isFirstColumn);
          }}
        >
          switchover
        </button>
      </DndProvider>
    </div>
  );
};