How do I add a marker in mapbox using react?

See more:

Javascript

ReactJS

react-native

Hello, i'm coding an app and i'm having some issues adding an marker to the map, i'm using React and Mapbox to do it, here's the part of the code: 

<pre>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={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={mapContainer} className="map-container"></div>
    </div>
  );
}

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

The map works just fine, but the markers doesn't show up..

What I have tried:

All the Mapbox tutorials, but i can't find the error in my code