Can't Display Navigation Controls

[RaphaelNunes10]

Description

The navigation controls don't show up on the map UI after being added as a component inside the MapboxMap component.

Steps to Reproduce

This is my current code:

<template>
  <div>
    <MapboxMap
      style="top: 65px; bottom: 40px;"
      map-id="map"
      :options="{
        style: 'mapbox://styles/mapbox/streets-v12',
        center: [100.0, 0.0],
        projection: 'mercator'
      }"
    >
      <MapboxNavigationControl :options="{ showCompass: false }" position="top-left" />
      <MapboxGeolocateControl position="top-left" />
      <MapboxGeocoder
          ref="geocoderRef"
          v-model="geocoderRes"
          position="top-right"
          @result="(result) => { console.log(result) }"
        />
      <MapboxDefaultMarker
          marker-id="customHTMLMarker"
          :lnglat="{ lng: 87, lat: 12 }"
          :options="{
            draggable: true
          }"
        >
        <template #marker>
        </template>
      </MapboxDefaultMarker>
      <MapboxFullscreenControl position="bottom-right" />
  </MapboxMap>
  </div>
</template>

<script lang="ts" setup>
import { ref } from '#imports'
import { MapboxMap, MapboxGeocoder, MapboxGeolocateControl, MapboxNavigationControl, MapboxDefaultMarker, MapboxFullscreenControl } from '#components'

const geocoderRes = ref()
</script>

Additional Info

MapboxGeolocateControl, MapboxGeocoder, MapboxDefaultMarker and MapboxFullscreenControl are being displayed as intended.