react-dndを使いたいと思って書いたのですが、一度ドラッグして移動した後に再びドラッグする事が出来ないです。 詳しい方見て頂けないでしょうか?宜しくお願い致します。動く物はcodesandboxに上げてあります。 App.js ``` import React, { useRef, useState } from "react"; import { DndProvider, useDrag, useDrop } from "react-dnd"; import { HTML5Backend } from "react-dnd-html5-backend"; import "./styles.css"; const MovableItem = ({ setIsFirstColumn, name }) => { const [{ isDragging }, drag] = useDrag({ type: "what", item: { name }, // ドラッグが離された時に動作する end: (item, monitor) => { const dropResult = monitor.getDropResult(); console.log("最初", dropResult); // Column 1の上で離すとnameにColumn 1が入るそしてtrueになる // それ以外ではundefinedになる if (dropResult && dropResult.name === "Column 1") { console.log("後で", dropResult.name); setIsFirstColumn(true); } else { setIsFirstColumn(false); } }, collect: (monitor) => ({ isDragging: monitor.isDragging() }) }); const opacity = isDragging ? 0.4 : 1; return ( <div ref={drag} className="movable-item" style={{ opacity }}> We will move this item </div> ); }; const Column = ({ children, className, title }) => { const [{ canDrop, isOver }, drop] = useDrop({ // カラムにwhatタイプの移動を許可する accept: "what", // コンポーネントを落とせる場所を指定する 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="Column 1" className="column first-column"> {/*ステートがtrueならドラッグするコンポーネントを渡す */} {isFirstColumn && Item} </Column> <Column title="Column 2" className="column second-column"> {console.log("haha", isFirstColumn)} {!isFirstColumn && Item} </Column> </DndProvider> </div> ); }; ``` 参考記事 [https://medium.com/litslink/react-dnd-in-examples-ce509b25839d](https://medium.com/litslink/react-dnd-in-examples-ce509b25839d) [codeSandBox](https://codesandbox.io/s/flamboyant-newton-m2nxx?file=/src/App.js)