Mapbox Geocoder doesn't show the search bar

Question

Im experimenting with Mapbox to build a simple web app around a map. I'm trying to implement the Mapbox Geocoder API, bit somehow I cant see the actual search bar. I have followed the examples provided by Mapbox, but I can't seem to figure it out. Hope you guys can help me out.

This is my code

import React, { useEffect, useRef, useState } from 'react';
import mapboxgl from 'mapbox-gl';
import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css';
import { Box, Flex,  } from '@chakra-ui/react';

const accessToken = "MyAccessToken";
const mapStyleUrl = "MyMap";

const MapComponent: React.FC = () => {
    const mapContainer = useRef<HTMLDivElement | null>(null);

    useEffect(() => {
        mapboxgl.accessToken = accessToken;

        const map = new mapboxgl.Map({
            container: mapContainer.current as HTMLElement, 
            style: mapStyleUrl,
            center: [-79.4512, 43.6568], 
            zoom: 13,
        });

        // Add the geocoder control to the map
        map.addControl(
            new MapboxGeocoder({
                accessToken: mapboxgl.accessToken,
                mapboxgl: mapboxgl,
            })
        );

    }, []);

    return (
        <Flex
            position="relative"
            height="95vh"
            width="95vw"
            marginTop="2.5vh"
            boxShadow="0 4px 12px 0 rgba(0, 0, 0, 0.05)"
            borderRadius="15px"
            flexDirection="column"
            justifyContent="flex-start"
            bg="white"
            ml={6}
            overflow="hidden"
        >
            <Box ref={mapContainer} height="100%" width="100%" />
        </Flex>
    );
};

export default MapComponent;

Im trying to have a search bar that allows for Geocoding.

Answer 1

I was able to fix the issue by putting the stylesheets and links into the index.html file.

<link href="https://api.mapbox.com/mapbox-gl-js/v3.0.1/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.0.1/mapbox-gl.js"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.min.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.css" type="text/css">