[Bug] Map projection property not working

[Hussain-Aziz]

Description

I have a map component. Although the projection is set to globe, it still renders mercator.

Expected Behavior

A globe projection in the map panel

Steps to Reproduce

import Map, { Marker, GeolocateControl } from 'react-map-gl';
import React, { useRef, useEffect, useState } from 'react';
import 'mapbox-gl/dist/mapbox-gl.css';

export default function MapPanel() {

  const initialViewState = {
    latitude: 25.4359571,
    longitude: 55.706461,
    zoom: 4
  }

  return (
    <Map
      ref={mapRef}
      mapboxAccessToken="TOKEN"
      initialViewState={initialViewState}
      mapStyle="mapbox://styles/mapbox/satellite-v9"
      projection='globe'
    >
      <GeolocateControl
        positionOptions={{ enableHighAccuracy: true }}
        trackUserLocation={true}
      />

      {(shownUserData ?? userData).map((data) => createMarkerWithTooltip(data))}

    </Map>
  )
}

Environment

• React Version: 17.0.1
• Framework version: react-map-gl@7.0.10
• Map library: mapbox-gl@1.13.2
• Browser: Edge
• OS: Windows

Logs

No response

[Pessimistress]

mapbox-gl v1.x does not support global projection.