title: Inside of a function the state is always same/initial
body: <p>The remove() function is called from an object. How can I get updated state value inside of that remove() function.</p>
  <pre><code>const [InfoBoxPin, setInfoBoxPin] = useState([]) 
  
  const createInfoBoxPin = (descriptions) =&gt;{
         
             var newPin = {
                  &quot;location&quot;:currentLoc, 
                  &quot;addHandler&quot;:&quot;mouseover&quot;, 
                  &quot;infoboxOption&quot;: { 
                  title: 'Comment', 
                  description: &quot;No comment Added&quot;,
                  actions: [{
                      label:'Remove Pin',
                      eventHandler: function () {
                          remove(newPin.location) //FUNCTION CALLED HERE
                      }
                  }] }
                  
                  }
              setInfoBoxPin((InfoBoxPin)=&gt;[...InfoBoxPin, newPin ]) // UPDATE STATE. Push the above object.
         
      }
  
  const remove = (pos) =&gt;{    
          console.log(InfoBoxPin)    //NEVER GETTING UPDATED STATE HERE.
  
          //Other codes here......
      }
  </code></pre>
  <p>This is a bing map Info card. Eventhandler creates a button which can call any function.</p>