How to use the mapbox-gl.accessToken function in mapbox-gl

fs.unlinkSync(path.resolve(mapsFolder, file));
            }
        });
    }
    if (fileExt == '.json') {
        var geojsonData = require(path.resolve(mapsFolder, file));
        stl_json.sources['jsonsource'] = {
            type: 'geojson',
            data: geojsonData
        };
    }
});

// console.log(stl_json.sources);
// document.getElementById('geojson').value = JSON.stringify(geojson, null, 4);
mapboxgl.accessToken = 'pk.eyJ1IjoiZGlnaXRhbGtpIiwiYSI6ImNqNXh1MDdibTA4bTMycnAweDBxYXBpYncifQ.daSatfva2eG-95QHWC9Mig';
var map = new mapboxgl.Map({
    container: 'map', // container id
    style: stl_json,
    // style: 'mapbox://styles/mapbox/streets-v9', // stylesheet location
    center: [-78.3816748, -0.3498079], // starting position [lng, lat]
    zoom: 14, // starting zoom
    pitch: 45,
    bearing: -17.6,
    hash: true
});

var draw = new MapboxDraw({
    displayControlsDefault: false,
    controls: {
        point: true,
        polygon: true,

// configuration globals
const width = 1280; // also change in style.css
const height = 720; // also change in style.css
const librariesAnimation = { enterProgress: 0, duration: 2000 };
const config = {
  // read in the access token from an environment variable (specify in .env or .env.local)
  mapboxAccessToken: process.env.MapboxAccessToken,
  mapStyles: {
    mapboxLight: 'mapbox://styles/mapbox/light-v9',
    mapboxDark: 'mapbox://styles/mapbox/dark-v9',
  },
};

// configure MapBox to use the access token
mapboxgl.accessToken = config.mapboxAccessToken;

// views & locations
const US_CENTER = [-98.5795, 39.8283];
const INITIAL_VIEW_STATE = {
  longitude: -78.8006344148876,
  latitude: 39.09086893888812,
  bearing: -29.368464314354455,
  zoom: 6.0,
  pitch: 52.84408429581342,
};
const COUNTRY_VIEW_STATE = {
  longitude: -97.01492690488716,
  latitude: 36.86409651033726,
  bearing: -2.3684643143544513,
  zoom: 3.9115186793818326,
  pitch: 30.894226099945293,

import React, { useLayoutEffect } from 'react';
import mapboxgl from 'mapbox-gl';

import { fallbackRasterStyle } from '../projects/projectsMap';
import { MAPBOX_TOKEN } from '../../config';
import 'mapbox-gl/dist/mapbox-gl.css';

mapboxgl.accessToken = MAPBOX_TOKEN;

const ProjectCreationMap = ({ mapObj, setMapObj, metadata, updateMetadata }) => {
  const mapRef = React.createRef();

  useLayoutEffect(() => {
    setMapObj({
      ...mapObj,
      map: new mapboxgl.Map({
        container: mapRef.current,
        // style: 'mapbox://styles/mapbox/bright-v9',
        style: MAPBOX_TOKEN ? 'mapbox://styles/mapbox/streets-v11' : fallbackRasterStyle,
        zoom: 0,
      }),
    });

    return () => {

startDragLngLat: null,
      startTouchLngLat: null,
      startZoomLngLat: null, // same as startZoom?
      startMoveLngLat: null,
      startRotatingLngLat: null, // same as startBearing?
      startBearing: null,
      startPitch: null,
      startZoom: null,
      userControlled: false,
      featureStates: null
    };

    const accessToken =
      props.mapboxApiAccessToken || context.mapboxApiAccessToken;
    if (accessToken) {
      mapboxgl.accessToken = accessToken;
    }

    this._simpleQuery = this._simpleQuery.bind(this);
    this._simpleClick = this._simpleClick.bind(this);
    this._simpleHover = this._simpleHover.bind(this);
    this._onChangeViewport = this._onChangeViewport.bind(this);
    this._resizedContainer = this._resizedContainer.bind(this);
  }

componentDidMount() {
        mapboxgl.accessToken = MAPBOX_ACCESS_TOKEN;
        
        this.map = new mapboxgl.Map({
            container: this.mapContainer,
            style: this.props.style,
            center: this.props.center,
            zoom: this.props.zoom
        });

        
        // Native Mapbox map controls

        if (!IS_MOBILE) {
            this.searchBar = new MapboxGeocoder({
                accessToken: mapboxgl.accessToken,
                mapboxgl: mapboxgl,
                language: 'pt-br',
                placeholder: 'Buscar endereços, estabelecimentos, ...',
                countries: 'br',
                // collapsed: IS_MOBILE
            });
            this.map.addControl(this.searchBar, 'bottom-right');
        }

        const cityPicker = new MapboxGeocoder({
            accessToken: mapboxgl.accessToken,
            mapboxgl: mapboxgl,
            language: 'pt-br',
            placeholder: 'Buscar cidades brasileiras',
            countries: 'br',
            types: 'place',

var mapboxgl = require('mapbox-gl');
var MapboxDraw = require('@mapbox/mapbox-gl-draw');
require('@mapbox/mapbox-gl-draw-freehand-mode');

var element = document.createElement('div');
document.querySelector('body').appendChild(element);

element.style.height = "90vh";

mapboxgl.accessToken = 'pk.eyJ1IjoiYmVuZWhta2UiLCJhIjoiY2plYTl6b3c2MHg5ODJxbGV4aXR4Z3p6YSJ9.d3jSAbsqSmpJwyVcp9iXbw';
const map = new mapboxgl.Map({
    container: element,
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [-122.431272, 37.778008],
    zoom: 12
});

const Draw = new MapboxDraw();
map.addControl(Draw, 'top-left');

map.on('draw.create', geojsonFromDrawing);
map.on('draw.update', geojsonFromDrawing);
map.on('draw.delete', geojsonFromDrawing);

function geojsonFromDrawing(){
    console.log(Draw.getAll());

_updateStateFromProps(oldProps, newProps) {
    mapboxgl.accessToken = newProps.mapboxApiAccessToken;
    this.setState({
      startDragLngLat: newProps.startDragLngLat
    });
  }

'use strict';
var mapboxgl = require('mapbox-gl');
var insertCss = require('insert-css');
var fs = require('fs');
mapboxgl.accessToken = window.localStorage.getItem('MapboxAccessToken');

var meta = document.createElement('meta');
meta.name = 'viewport';
meta.content = 'initial-scale=1,maximum-scale=1,user-scalable=no';
document.getElementsByTagName('head')[0].appendChild(meta);

insertCss(fs.readFileSync('./lib/mapbox-gl-geocoder.css', 'utf8'));
insertCss(
  fs.readFileSync('./node_modules/mapbox-gl/dist/mapbox-gl.css', 'utf8')
);

var MapboxGeocoder = require('../');

var mapDiv = document.body.appendChild(document.createElement('div'));
mapDiv.style.position = 'absolute';
mapDiv.style.top = 0;

constructor(props) {
    const {mapboxApiAccessToken, viewState} = props;

    mapboxgl.accessToken = mapboxApiAccessToken;

    this._map = new mapboxgl.Map({
      ...props,
      interactive: false,
      center: [viewState.longitude, viewState.latitude],
      zoom: viewState.zoom,
      bearing: viewState.bearing,
      pitch: viewState.pitch
    });
  }

constructor(props) {
    super(props);
    //Set your Access Token in App.js
    mapboxgl.accessToken = this.props.token;
  }