React-mapbox-gl: Unable to hook into Mapbox API for adding 3D terrain to a map

Question

I am using react-mapbox-gl in my next application, according to the documentation:

onStyleLoad: (map, loadEvent) => void called with the Mapbox Map instance when the load event is fired. You can use the callback's first argument to then interact with the Mapbox API.

This exposes a prop which allows one to interact with Mapbox API directly, and that has worked in regards to adding a Geocoder and GeoLocation Control but does not work in regards to adding 3d terrain.

This is my map component:

import { useCallback, useEffect, useRef } from 'react'
import ReactMapboxGl, { RotationControl, ZoomControl } from "react-mapbox-gl";

import mapboxgl from 'mapbox-gl';

import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';

const mapAccess = {
  mapboxApiAccessToken: process.env.MAPBOX_ACCESS_TOKEN
}
const Map = ReactMapboxGl({
  accessToken: process.env.MAPBOX_ACCESS_TOKEN,
  logoPosition: 'bottom-right',
  pitchWithRotate: true
});

export default function MyMap() {
  return (
    <>
      <Map
        style="mapbox://styles/mapbox/streets-v9"
        onStyleLoad={(map) => {
          map.addSource('mapbox-dem', {
            'type': 'raster-dem',
            'url': 'mapbox://mapbox.mapbox-terrain-dem-v1',
            'tileSize': 512,
            'maxzoom': 14
          });

          map.setTerrain({ 'source': 'mapbox-dem', 'exaggeration': 1.5 });

          map.addLayer({
            'id': 'sky',
            'type': 'sky',
            'paint': {
              'sky-type': 'atmosphere',
              'sky-atmosphere-sun': [0.0, 0.0],
              'sky-atmosphere-sun-intensity': 15
            }
          }); map.on('load', () => {
            console.log('load')
          });

          map.addControl(
            new MapboxGeocoder({
              accessToken: mapboxgl.accessToken,
              mapboxgl: mapboxgl,
              position: 'top-right'

            })
          );

          map.addControl(
            new mapboxgl.GeolocateControl({
              positionOptions: {
                enableHighAccuracy: true
              },

              trackUserLocation: true,
              showUserHeading: true,
              showAccuracyCircle: true,
              position: 'top-left'

            })
          );

        }}
      >
        <RotationControl className="mt-12" position="top-right" />
        <ZoomControl className="mt-[2.375rem]" position="top-left" />

      </Map>
    </>
  )
}

Any idea why this is not working?

Thanks in advance!