title: useState not working as expected - selectedElement in the state is resetting to initial value supplied in starting
body: <p>I have two events drag start and drag end. At the time of drag start I am deciding whether to move it or copy depending on some logic and <code>setSelectedElement</code> is running and setting the new element to it but as you can see console of new element in drag end and console for previously selected in drag start are both empty.</p>
  <p>after some debugging, I found out it is turning to an empty string supplied in the very beginning of use state.</p>
  <p>App.js</p>
  <pre><code>export default function App() {
    const [selectedElement, setSelectedElement] = useState(&quot;&quot;);
    const [diffX, setDiffX] = useState(0);
    const [diffY, setDiffY] = useState(0);
    const [group, setGroup] = useState([]);
  
  
      useEffect(() =&gt; {
          console.log(&quot;selected element changed&quot;);
        }, [selectedElement]);
  
      const handleDragStart = (event) =&gt; {
          console.log(&quot;drag start &quot;);
      
          // console.log(&quot;class list&quot;, event.currentTarget.classList);
          console.log(&quot;previous selected element is &quot;, selectedElement);
          let functionalityType = &quot;&quot;;
          let elementSelected = &quot;&quot;;
          let classList = event.currentTarget.classList;
          for (let i = 0; i &lt; classList.length; i++) {
            //move element
            if (classList[i].includes(&quot;group&quot;)) {
              functionalityType = &quot;move&quot;;
              break;
            }
          }
      
          if (functionalityType !== &quot;move&quot;) {
            console.log(&quot;inside copy&quot;);
            elementSelected = event.currentTarget.cloneNode(true);
            elementSelected.style.position = &quot;absolute&quot;;
            elementSelected.addEventListener(&quot;dragstart&quot;, handleDragStart);
            elementSelected.addEventListener(&quot;dragend&quot;, handleDragEnd);
          } else {
            console.log(&quot;inside move&quot;);
            elementSelected = event.currentTarget;
            // console.log(&quot;event current target&quot;, event.currentTarget);
          }
      
          setDiffX(event.clientX - event.currentTarget.getBoundingClientRect().left);
          setDiffY(event.clientY - event.currentTarget.getBoundingClientRect().top);
          setSelectedElement(elementSelected);
        };
      
        const handleDragEnd = (event) =&gt; {
          console.log(&quot;drag end&quot;);
      
          let newElement = selectedElement;
      
          console.log(&quot;new element is&quot;, newElement);
      
          newElement.style.top = event.clientY - diffY + &quot;px&quot;;
          newElement.style.left = event.clientX - diffX + &quot;px&quot;;
      
          document.getElementById(&quot;MidArea&quot;).appendChild(newElement);
        }
  
      return (
      
          &lt;div
                  draggable={true}
                  onDragStart={props.handleDragStart}
                  onDragEnd={props.handleDragEnd}
                  className=&quot;draggable&quot;
                &gt;);
      }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/FNLpQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FNLpQ.png" alt="enter image description here" /></a></p>