Как визуализировать карту Mapbox в React.js, не раскрывая ключ API, используя Mapbox GL JS и бэкэнд Laravel?

Я работаю над проектом React.js, где мне нужно отобразить карту Mapbox. Я создал собственный стиль карты в Mapbox Studio и хочу использовать его в своем приложении. Чтобы избежать раскрытия моего ключа API Mapbox на стороне клиента, я настроил серверную часть Laravel, используя Laravel Sanctum для обработки запросов API Mapbox.

Вот что я сделал на данный момент:

В Laravel я создал MapboxController.php, который извлекает стиль с помощью API стилей Mapbox и моего секретного ключа.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Http;

class MapboxController extends Controller
{
    public function getMapStyle()
    {

        $response = Http::get('https://api.mapbox.com/styles/v1/{username}/{style_id}?access_token='.env('MAPBOX_API_KEY'));


        return response()->json($response->json());
    }
}

API Laravel возвращает ответ моему приложению React, которое должно инициализировать карту следующим образом:

import React, { useEffect, useRef } from "react";
import mapboxgl from "mapbox-gl";
import "./Map.css";

const Map = () => {
  const mapContainer = useRef(null);

  useEffect(() => {
    fetch("MY_BACKEND_URL")
      .then((response) => response.json())
      .then((data) => {
        console.info(data); //Logging the response for debugging, the data arrives as expected

        // Initializing the map with the data
        const map = new mapboxgl.Map({
          container: mapContainer.current,
          style: data.style,
          center: [9.984395, 51.145088],
          zoom: 8,
          attributionControl: false,
          logoPosition: "bottom-left",
        });

        const attribution = new mapboxgl.AttributionControl({});
        map.dragRotate.disable();
        map.touchZoomRotate.disableRotation();
        map.addControl(attribution, "bottom-right");

        return () => map.remove();
      })
      .catch((error) => {
        console.error("Fehler beim Laden der Karte: ", error);
      });
  }, []);

  return <div ref = {mapContainer} style = {{ height: "100vh" }} />;
};

export default Map;

Однако я столкнулся с проблемой, из-за которой Mapbox по-прежнему требует ключ API на стороне клиента. Вот сообщение об ошибке, которое я получаю в консоли:

Map.js:32 Fehler beim Laden der Karte:  Error: An API access token is required to use Mapbox GL. See https://docs.mapbox.com/api/overview/#access-tokens-and-token-scopes
    at e.cS._makeAPIURL (mapbox.js:221:23)
    at e.cS.normalizeStyleURL (mapbox.js:80:21)
    at kr.loadURL (style.js:390:40)
    at Map._updateStyle (map.js:2019:28)
    at Map.setStyle (map.js:1994:25)
    at new Map (map.js:658:18)
    at Map.js:15:21

Я ищу способ отобразить свою карту в React без ключа API во внешнем интерфейсе. Есть ли способ безопасно использовать Mapbox в этом сценарии, когда ключ API остается скрытым и во внешний интерфейс отправляются только необходимые данные?