title: Mapbox marker popups wont open/close individually
body: <p>When a user added marker is clicked on my map it opens up popups for all the markers on the map<a href="https://i.stack.imgur.com/bhlhl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bhlhl.png" alt="enter image description here"></a></p>
  
  <p>The popups open up for the individual marker that is clicked on database loaded markers but for 'setShowUserPopup' they open for every single marker a user has added as shown in the photo (the forms are the popup content)</p>
  
  <p>Thanks for any help in advance!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { useState, useEffect } from "react";
  import ReactMapGL, { Marker, Popup } from "react-map-gl";
  
  import { listLogEntries } from "./API";
  import LogEntryForm from "./LogEntryForm";
  import { Grid, Card, Icon, Fab } from "@material-ui/core";
  
  const BasicMap = () =&gt; {
    // Markers loaded from database
    const [logEntries, setLogEntries] = useState([]);
    const [showPopup, setShowPopup] = useState({});
  
    // Markers from user input
    const [userMarkers, setUserMarkers] = useState([]);
    const [showUserPopup, setShowUserPopup] = useState({});
  
    // viewport is all the infomation about the default map state
    const [viewport, setViewport] = useState({
      width: "100vw",
      height: "100vh",
      latitude: 52.950001,
      longitude: -1.15,
      zoom: 6,
      minZoom: 3
      // maxZoom: 3
    });
  
    // Get entries from API
  
    const getEntries = async () =&gt; {
      const logEntries = await listLogEntries();
      setLogEntries(logEntries);
    };
  
    useEffect(() =&gt; {
      getEntries();
    }, []);
  
    const showAddMarkerPopup = event =&gt; {
      const [longitude, latitude] = event.lngLat;
  
      setUserMarkers([
        ...userMarkers,
        {
          id: userMarkers.length + 1,
          lat: latitude,
          long: longitude,
          draggable: true
        }
      ]);
    };
  
    useEffect(() =&gt; {
      console.log("userMarkers", userMarkers);
    }, [userMarkers]);
  
    return (
      &lt;ReactMapGL
        {...viewport}
        mapStyle="mapbox://styles/veleter/ck7xdy1yo1bkj1ipmsbhe9c96"
        mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
        onViewportChange={setViewport}
        onClick={showAddMarkerPopup}
      &gt;
        {/* DATABASE LOADED MARKERS */}
        {logEntries.map(entry =&gt; (
          &lt;React.Fragment key={entry._id}&gt;
            &lt;Marker latitude={entry.latitude} longitude={entry.longitude}&gt;
              &lt;div
                onClick={() =&gt;
                  setShowPopup({
                    ...showPopup,
                    [entry._id]: true
                  })
                }
              &gt;
                &lt;svg
                  className="marker yellow"
                  style={{
                    height: `${6 * viewport.zoom}px`,
                    width: `${6 * viewport.zoom}px`
                  }}
                  version="1.1"
                  id="Layer_1"
                  x="0px"
                  y="0px"
                  viewBox="0 0 512 512"
                &gt;
                  &lt;g&gt;
                    &lt;g&gt;
                      &lt;path
                        d="M256,0C153.755,0,70.573,83.182,70.573,185.426c0,126.888,165.939,313.167,173.004,321.035
                          c6.636,7.391,18.222,7.378,24.846,0c7.065-7.868,173.004-194.147,173.004-321.035C441.425,83.182,358.244,0,256,0z M256,278.719
                          c-51.442,0-93.292-41.851-93.292-93.293S204.559,92.134,256,92.134s93.291,41.851,93.291,93.293S307.441,278.719,256,278.719z"
                      /&gt;
                    &lt;/g&gt;
                  &lt;/g&gt;
                &lt;/svg&gt;
              &lt;/div&gt;
            &lt;/Marker&gt;
            {showPopup[entry._id] ? (
              &lt;Popup
                latitude={entry.latitude}
                longitude={entry.longitude}
                closeButton={true}
                closeOnClick={false}
                dynamicPosition={true}
                onClose={() =&gt;
                  setShowPopup({
                    ...showPopup,
                    [entry._id]: false
                  })
                }
                anchor="top"
              &gt;
                &lt;div className="popup"&gt;
                  {/* &lt;h3&gt;{entry.title}&lt;/h3&gt;
                  &lt;p&gt;{entry.comments}&lt;/p&gt;
                  &lt;p&gt;
                    &lt;b&gt;Longitude: &lt;/b&gt;
                    {entry.longitude}
                  &lt;/p&gt;
                  &lt;p&gt;
                    &lt;b&gt;Latitude: &lt;/b&gt;
                    {entry.latitude}
                  &lt;/p&gt;
                  &lt;small&gt;
                    Ticket Placed:{" "}
                    {new Date(entry.visitDate).toLocaleDateString()}
                  &lt;/small&gt;
                  {entry.image &amp;&amp; &lt;img src={entry.image} alt={entry.title} /&gt;} */}
  
                  &lt;Card elevation={3} className="p-4"&gt;
                    &lt;div className="flex items-center"&gt;
                      &lt;Fab
                        size="medium"
                        className="bg-light-error circle-44 box-shadow-none overflow-hidden"
                      &gt;
                        &lt;Icon className="text-error"&gt;star_outline&lt;/Icon&gt;
                      &lt;/Fab&gt;
                      &lt;h5 className="font-medium text-error m-0 ml-3"&gt;
                        {entry.title}
                      &lt;/h5&gt;
                    &lt;/div&gt;
                    &lt;div className="pt-4 flex items-center"&gt;
                      &lt;h2 className="m-0 text-muted flex-grow"&gt;&lt;/h2&gt;
                      &lt;div className="ml-3 small-circle bg-error text-white"&gt;&lt;/div&gt;
                      &lt;span className="text-13"&gt;({entry.longitude})&lt;/span&gt;
                      &lt;span className="text-13"&gt;({entry.latitude})&lt;/span&gt;
                    &lt;/div&gt;
                  &lt;/Card&gt;
                &lt;/div&gt;
              &lt;/Popup&gt;
            ) : null}
          &lt;/React.Fragment&gt;
        ))}
  
        {/* USER ADDED MARKER */}
  
        {userMarkers.map(userMarker =&gt; (
          &lt;React.Fragment key={userMarker._id}&gt;
            &lt;Marker
              latitude={userMarker.lat}
              longitude={userMarker.long}
              draggable
              // onDragEnd={setUserMarkers}
            &gt;
              &lt;div
                onClick={() =&gt;
                  setShowUserPopup({
                    ...showUserPopup,
                    [userMarker._id]: true
                  })
                }
              &gt;
                &lt;div&gt;
                  &lt;svg
                    className="marker red"
                    style={{
                      height: `${6 * viewport.zoom}px`,
                      width: `${6 * viewport.zoom}px`
                    }}
                    version="1.1"
                    id="Layer_1"
                    x="0px"
                    y="0px"
                    viewBox="0 0 512 512"
                  &gt;
                    &lt;g&gt;
                      &lt;g&gt;
                        &lt;path
                          d="M256,0C153.755,0,70.573,83.182,70.573,185.426c0,126.888,165.939,313.167,173.004,321.035
                          c6.636,7.391,18.222,7.378,24.846,0c7.065-7.868,173.004-194.147,173.004-321.035C441.425,83.182,358.244,0,256,0z M256,278.719
                          c-51.442,0-93.292-41.851-93.292-93.293S204.559,92.134,256,92.134s93.291,41.851,93.291,93.293S307.441,278.719,256,278.719z"
                        /&gt;
                      &lt;/g&gt;
                    &lt;/g&gt;
                  &lt;/svg&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/Marker&gt;
  
            {showUserPopup[userMarker._id] ? (
              &lt;Popup
                latitude={userMarker.lat}
                longitude={userMarker.long}
                closeButton={true}
                closeOnClick={false}
                dynamicPosition={true}
                onClose={() =&gt;
                  setShowUserPopup({
                    ...showUserPopup,
                    [userMarker._id]: false
                  })
                }
                anchor="top"
              &gt;
                &lt;div className="popup"&gt;
                  &lt;LogEntryForm /&gt;
                &lt;/div&gt;
              &lt;/Popup&gt;
            ) : null}
          &lt;/React.Fragment&gt;
        ))}
      &lt;/ReactMapGL&gt;
    );
  };
  export default BasicMap;</code></pre>
  </div>
  </div>
  </p>