title: Trying to change state in Parent from Child component React Hooks
body: <p>I've been looking through related posts and tried a few solutions but I wasn't able to adapt any of them to my situation.
  I am trying to change the state of <code>selectedPin</code> by sending the function and calling it from the child component.</p>
  <p>See below my code</p>
  <p>Parent component :</p>
  <pre><code>export default function Pins(data) {
  const chargers = data.data;
  const [selectedPin, setSelectedPin] = useState(null);
  
  const handleClose = () =&gt; {
  setSelectedPin(null);
  };
  
  return (
  &lt;&gt;
    {chargers.map((charger, index) =&gt; (
      &lt;Marker
        key={index}
        longitude={charger.AddressInfo.Longitude}
        latitude={charger.AddressInfo.Latitude}
      &gt;
        &lt;Button
          onClick={(e) =&gt; {
            e.preventDefault();
            setSelectedPin(charger);
          }}
        &gt;
          &lt;img src=&quot;./assets/pin.svg&quot; alt=&quot;marker pin&quot; /&gt;
        &lt;/Button&gt;
      &lt;/Marker&gt;
    ))}
    {selectedPin ? (
      &lt;PopupInfo selectedPin={selectedPin} handleClose={handleClose} /&gt;
    ) : null}
   &lt;/&gt;
   );
  }
  </code></pre>
  <p>Child component :</p>
  <pre><code>export default function PopupInfo(selectedPin, { handleClose }) {
  const pin = selectedPin.selectedPin;
  console.log(pin);
  console.log(handleClose);
  
  return (
  &lt;Popup
    latitude={pin.AddressInfo.Latitude}
    longitude={pin.AddressInfo.Longitude}
    onClose={handleClose}
    &gt;
      &lt;div&gt;Popup Info&lt;/div&gt;
    &lt;/Popup&gt;
    );
  }
  </code></pre>
  <p>When console logging <code>handleClose</code> in child component I am getting <code>undefined</code>.</p>