So I have been trying to build my own google map by throwing in multiple markers and showing infowindows based off of those markers data like location, description, title etc. when I have a variable holding the dummy data it works fine when opening the infowindows, but when I moved it to saving the props.data from when I put in like an excel sheet, it doesn't let me click on the markers. The Markers show up and they are all in the right spots but when I click on the marker my map goes back to wherever my default center coords are located and doesn't open the infowindow.

I thought this might be a props issue so I tried to set up a useeffect hook to save the incoming props to state and then the markers are saved in state instead of a variable but that isn't working either when I click on the markers. I am not sure if it is something in my code or if I need to make it marker clusters or something, but I do not get why it works when I use dummy data variable but not props data.

import React, { useState, useEffect } from "react";
import {
  GoogleMap,
  LoadScript,
  Marker,
  InfoWindow,
} from "@react-google-maps/api";
import apiKey from "../config.js";

export const MapContainer = (props) => {
  const [selected, setSelected] = useState({});

  const [accounts, setAccounts] = useState([]);

  useEffect((props) => {
    setAccounts(props.data);
  }, [props.data])

  const onSelect = (item) => {
    setSelected(item);
  };

  const mapStyles = {
    height: "50vh",
    width: "100%",
  };

  let defaultCenter = (selected.location) ? selected.location :  {lat: 37.9101, lng: -122.0652}

  return (
    <LoadScript googleMapsApiKey={apiKey.apiKey}>
      <GoogleMap mapContainerStyle={mapStyles} zoom={12} center={defaultCenter}>

        { accounts.length > 0 &&
                  accounts.map((item) => {
                    console.log(item)
                    return (
                      <Marker
                        key={item._id}
                        position={{lat: item.latitude, lng: item.longitude}}
                        onClick={() => onSelect(item)}>

                        {selected.location && (
                          <InfoWindow
                            position={selected.location}
                            clickable={true}
                            onCloseClick={() => setSelected({})}
                          >
                            <p>{selected.name}</p>
                            <p>{selected.description}</p>
                          </InfoWindow>
                        )}

                      </Marker>
                    );
                  })
        }
      </GoogleMap>
    </LoadScript>
  );
};

export default MapContainer;

Thank you in advance for the help, this one just has me totally stumped.