Leaflet map with Tilelayer not showing

Question

I’m learning to create maps by Leaflet and wanted to add a style Tilelayer, the problem is that it starts loading right at the beginning of loading and then returns to the default style of map, my map theme I chose is the Basic Galaxy - follows print:

Before:

Afterward:

My code is this::

import React from 'react';
import axios from 'axios';
import { 
  TileLayer 
} from 'react-leaflet';
import { Helmet } from 'react-helmet';
import Map from 'components/Map';
import Layout from 'components/Layout';
import Snippet from 'components/Snippet';
import Container from 'components/Container';

class Index extends React.Component {
  constructor(){
    super();
    this.state = {
      DATA: [],
      LOCATION: {
        lat: 0,
        lng: 0
      },
      DEFAULT_ZOOM: 2
    }
  }

  componentDidMount() {...
  }

  async mapEffect() {...
  }

  render() {
    
    const {...
    } = this.state;

    const CENTER = [...
    ];

    const mapSettings = {...
    };
    
    return (
      <Layout pageName='home'>
        <Helmet>
          <title>Home Page</title>
        </Helmet>
        
        <Map {...mapSettings}>
          <TileLayer 
            url='https://api.mapbox.com/styles/v1/felipe1234-dev/ckkyz09e500yf17pmhvpahmf7/tiles/256/{z}/{x}/{y}@2x?access_token=MINHA_CHAVE_DE_ACESSO' 
            attribution="Map data &copy; <a href=&quot;https://www.openstreetmap.org/&quot;>OpenStreetMap</a> contributors, <a href=&quot;https://creativecommons.org/licenses/by-sa/2.0/&quot;>CC-BY-SA</a>, Imagery &copy; <a href=&quot;https://www.mapbox.com/&quot;>Mapbox</a>"
          />
        </Map>

        <Container type='content' className='text-center home-start'>
          <h2>Still Getting Started?</h2>
          <p>Run the following in your terminal!</p>
          <Snippet>gatsby new [directory] https://github.com/colbyfayock/gatsby-starter-leaflet</Snippet>
          <p className='note'>Note: Gatsby CLI required globally for the above command</p>
        </Container>
      </Layout>
    );
  }
}

export default Index;

However, I saw it in other places while researching the Imports like this:

...
import { 
  MapContainer,
  TileLayer 
} from 'react-leaflet';
...

As soon as I switch to "Mapcontainer" there at render(), my map simply disappears, rendering nothing.

I tried, then:

...
import { 
  Map,
  TileLayer 
} from 'react-leaflet';
...

Gives an error where Map does not exist.

...
import Map from 'components/Map';
import TileLayer from 'components/TileLayer';
...

There’s a mistake where Tilelayer doesn’t exist.

The recommendation of the Leaflet documentation itself is to import everything from React-leaflet. But in my case it doesn’t work.

I thought my url to the style might be wrong - it follows:

https://api.mapbox.com/styles/v1/felipe1234-dev/ckkyz09e500yf17pmhvpahmf7/tiles/256/{z}/{x}/{y}@2x?access_token=MINHA_CHAVE_DE_ACESSO

I’ve checked everything, but nothing.

I thought my version might be outdated:

  "dependencies": {
    "gatsby": "^2.31.1",
    "gatsby-plugin-manifest": "^2.11.0",
    "gatsby-plugin-react-helmet": "^3.9.0",
    "gatsby-plugin-react-leaflet": "3.0.0",
    "gatsby-plugin-resolve-src": "^2.1.0",
    "gatsby-plugin-sass": "^3.1.0",
    "gatsby-source-filesystem": "^2.10.0",
    "gatsby-source-graphql": "^2.13.0",
    "leaflet": "^1.7.1",
    "path": "^0.12.7",
    "prop-types": "^15.7.2",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-helmet": "^6.1.0",
    "react-icons": "^4.1.0",
    "react-leaflet": "^3.1.0",
    "sass": "^1.32.5"
  },

I have no idea, just in case I reinstalled:

npm install react react-dom leaflet
npm install react-leaflet