I'm doing a project, using react js with tyscript I'm facing an error after deploying the application on netlify, with the MapBox api, which when running returns the following message on the console, as described below and making it impossible to search for locations on the api map.:

"Failed to load resource: the server responded with a status of 401 (Unauthorized)" // 20220606202752 // https://api.mapbox.com/geocoding/v5/mapbox.places/t.json?access_token=undefined

{ "message": "Not Authorized - Invalid Token" }

I use an environment variable for my Mapbox token and a variable for local access:

REACT_APP_ACESS_TOKEN_MAP_BOX=pk.
REACT_APP_API_URL=http://localhost:

Below is my tyscript code to access the environment variables and to access the Token MapBox. One information is that the application to search for locations on maps locally is working, only when I deploy via netlify, it displays the message described above from "message": "Not Authorized - Invalid Token"

import axios from "axios";
import { OrderPayload } from "./Orders/types";

const API_URL = process.env.REACT_APP_API_URL;
const mapboxToken = process.env.REACT_APP_ACESS_TOKEN_MAP_BOX;

export function fetchProducts (){
    return axios(`${API_URL}/products`)
}

export function fetchLocalMapBox(local: string){
    return axios (`https://api.mapbox.com/geocoding/v5/mapbox.places/${local}.json?access_token=${mapboxToken}`)
}

export function saveOrder(payload: OrderPayload) {
    return axios.post(`${API_URL}/orders`, payload);
}