MAPBOX REACT DUVIDA SOBRE MARKERS

import * as React from "react";
import { useRef, useEffect, useState, useContext } from "react";
import { Link, Redirect } from "react-router-dom";

import NoInternet from "../../no internet/no-internet";

import "./jogo.css";
import back from "../../../assets/icons/blackback.svg";

import mapboxgl from "mapbox-gl";
mapboxgl.accessToken = process.env.REACT_APP_MAPBOX_PRIVATE_TOKEN;

export default function Jogo() {
  //pensando em congelar a latitude e longitude da região ABCD e diminuir o zoom do mapa
  const [coords, setCoords] = useState({
    lat: -23.6858501,
    long: -46.564429999999994,
  });
  useEffect(() => {
    navigator.geolocation.getCurrentPosition(
      (pos) => {
        setCoords({
          lat: pos.coords.latitude,
          long: pos.coords.longitude,
        });
      },
      (err) => {
        //será executada quando ocorrer um erro na solicitação da posição
        alert("É necessário que o uso da localização seja autorizado!");
      }z
    );
  }, []);

  const [online] = useState(navigator.onLine);
  return <>{!online ? <NoInternet /> : <ComponenteMapa coords= />}</>;
}

/* MAPA FOI COMPONENTIZADO PARA MELHOR MANUTENÇÃO DAS INFORMAÇÕES */
function Mapa({ coords }) {
  const marker = new mapboxgl.Marker({
    color: "#ff1500",
    draggable: false,
  }).setLngLat([-23.6858501, -46.56443]);

  const mapContainer = useRef(null);
  const map = useRef(null);
  const [zoom] = useState(10);
  const [latitude] = useState(coords.lat);
  const [longitude] = useState(coords.long);

  useEffect(() => {
    if (map.current) return; // initialize map only once
    map.current = new mapboxgl.Map({
      container: mapContainer.current,
      style: process.env.REACT_APP_MAPBOX_STYLE_URL,
      center: [longitude, latitude],
      zoom: zoom,
    });
  });
  return (
    <div>
      <div ref= className="map-container"></div>
    </div>
  );
}

function ComponenteMapa({ coords }) {
  return (
    <>
      <Link to="/home">
        <img src= alt="" className="sair-aba-jogo" />
      </Link>
      <Mapa coords= />
    </>
  );
}