How can I redraw markers in the GoogleMapReact component?

I have a problem with my react google maps component. Even when I switch between different routes and fetch new data, my component won’t refresh markers. I tried to create a state and change it in useEffect to see if the map is rendered again when changing events and it does. So I assume that something needs to be done with the renderMarkers function but I have no idea what, though. I tried console logging markers and they’re displayed only once during application’s first run.

Parent component:

const EventsPage: React.FC<Props> = ({ page_filter }) => {

    const { data: Events_data, isFetching } = useGetEventsQuery(page_filter.toLowerCase());

    return (
        <div className={classes.Main_container}>
            <h2 className={classes.Header}>
                {page_filter} Events:
            </h2>
            <Map data={Events_data} />
            <div className={classes.Events_container}>
                {isFetching && <Loader />}
                {Events_data?.length === 0 ?
                    (
                        <h2>No Events found in this category.</h2>
                    ) :
                    (
                        <Events data={Events_data} />
                    )
                }
            </div>
        </div>
    )
}

Map component (child):

const Map: React.FC<Props> = ({ data }) => {
  const events = data?.events;
  const center = { lat: 51.107, lng: 17.04 };
  const zoom = 14;

  const renderMarkers = (map: any, maps: any) => {
    events?.map(event => {
      const pos = { lat: Number(event.lat), lng: Number(event.lng) };
      let color = "";
      let path = "";

      if (event.type === "Basketball") {
        color = "#dd7e01";
        path = PathType.BASKETBALL
      } else if (event.type === "Volleyball") {
        color = "#2160d4";
        path = PathType.VOLLEYBALL
      } else if (event.type === "Football") {
        color = "#30bf1c";
        path = PathType.FOOTBALL
      } else if (event.type === "Chess") {
        color = "#a88253";
        path = PathType.CHESS
      } else if (event.type === "Tennis") {
        color = "#ceff19";
        path = PathType.TENNIS
      }

      let marker = new maps.Marker({
        position: pos,
        map,
        icon: {
          path: path,
          fillColor: color,
          fillOpacity: 1,
          strokeColor: color,
          scale: 1.15
        },
        title: `${event.type} by ${event.creator.username}. People: ${event.number_of_people}/${event.people_needed}`
      });

      console.log(marker);
    })
  }

  return (
    <div className={classes.Map_container} id={center.toString()}>
      <GoogleMapReact
        bootstrapURLKeys={{ key: {API.key} }}
        defaultCenter={center}
        center={center}
        defaultZoom={zoom}
        margin={[50, 50, 50, 50]}
        // onChange={}
        // onChildClick={}
        onGoogleApiLoaded={({ map, maps }) => renderMarkers(map, maps)}
        options={{
          backgroundColor: "#282C35",
          styles: [
            { elementType: "geometry", stylers: [{ color: "#282C35" }] },
            { elementType: "labels.text.stroke", stylers: [{ color: '#242f3e' }] },
            { elementType: "labels.text.fill", stylers: [{ color: "#746855" }] },
            {
              featureType: "administrative.locality",
              elementType: "labels.text.fill",
              stylers: [{ color: "#E4AD38" }],
            },
            {
              featureType: "transit",
              elementType: "labels.icon",
              stylers: [{ visibility: "off" }]
            },
            {
              featureType: "road",
              elementType: "labels.icon",
              stylers: [
                { visibility: "off" }
              ]
            },
            {
              featureType: "poi",
              stylers: [{ visibility: "off" }],
            },
            {
              featureType: "road",
              elementType: "geometry",
              stylers: [{ color: "#191919" }],
            },
            {
              featureType: "road",
              elementType: "geometry.stroke",
              stylers: [{ color: "#212a37" }],
            },
            {
              featureType: "road",
              elementType: "labels.text.fill",
              stylers: [{ color: "#9ca5b3" }],
            },
            {
              featureType: "road.highway",
              elementType: "geometry",
              stylers: [{ color: "#746855" }],
            },
            {
              featureType: "road.highway",
              elementType: "geometry.stroke",
              stylers: [{ color: "#1f2835" }],
            },
            {
              featureType: "road.highway",
              elementType: "labels.text.fill",
              stylers: [{ color: "#f3d19c" }],
            },
            {
              featureType: "transit",
              elementType: "geometry",
              stylers: [{ color: "#191919" }],
            },
            {
              featureType: "water",
              elementType: "geometry",
              stylers: [{ color: "#17263c" }],
            },
            {
              featureType: "water",
              elementType: "labels.text.fill",
              stylers: [{ color: "#515c6d" }],
            },
            {
              featureType: "water",
              elementType: "labels.text.stroke",
              stylers: [{ color: "#17263c" }],
            },
          ]
        }}

      />
    </div>
  )
}