I’m building a music player app, and I don’t know why my request to access the Spotify API is declined and I can’t fetch the correct info of artists.

My application is currently running on Microsoft Egde, my desired target is to fetch 18 artists, which displayed on a carousel slider, containing 6 Vietnamese artists on the first slide, 6 US artists on the second slide and the remaining 6 UK artists on the third slide. Here is my AllArtists.jsx file:

import React, { useEffect, useState } from 'react';
import './AllArtists.css';
import axios from 'axios';

const AllArtists = () => {
    const [vnArtists, setVnArtists] = useState([]);
    const [usArtists, setUsArtists] = useState([]);
    const [ukArtists, setUkArtists] = useState([]);

    useEffect(() => {
        const getSpotifyAccessToken = async () => {
            const clientId = 'my_client_id_code';
            const clientSecret = 'my_client_secret_code';
            const authaccessToken = `${clientId}:${clientSecret}`;
            const accessToken = btoa(authaccessToken);
            

            try {
                const response = await axios.post('https://accounts.spotify.com/api/token',
                    'grant_type=client_credentials',
                    {
                        headers: {
                            'Authorization': `Basic ${accessToken}`,
                            'Content-Type': 'application/x-www-form-urlencoded'
                        }
                    }
                );
                return response.data.access_token;
                
            } catch (error) {
                console.error("Error receiving Spotify API access token", error);
                return null;
            }
        };

        const fetchArtists = async () => {
            const token = await getSpotifyAccessToken();

            if (!token) {
                console.error('Failed to get access token');
                return;
            }

            try {
                const headers = {
                    'Authorization': `Bearer ${token}`
                };

                const vnArtistsResponse = await axios.get('https://api.spotify.com/v1/search', {
                    headers, 
                    params: {
                        q: 'artist:*',
                        type: 'artist',
                        market: 'VN',
                        limit: 6,
                    },
                });

                const usArtistsResponse = await axios.get('https://api.spotify.com/v1/search', {
                    headers, 
                    params: {
                        q: 'artist:*',
                        type: 'artist',
                        market: 'US',
                        limit: 6,
                    },
                });

                const ukArtistsResponse = await axios.get('https://api.spotify.com/v1/search', {
                    headers, 
                    params: {
                        q: 'artist:*',
                        type: 'artist',
                        market: 'GB',
                        limit: 6,
                    },
                });

                setVnArtists(vnArtistsResponse.data.artists.items);
                setUsArtists(usArtistsResponse.data.artists.items);
                setUkArtists(ukArtistsResponse.data.artists.items);

            } catch (error) {
                console.error('Error fetching artists from Spotify API', error);
            }
        };

        fetchArtists();
    }, []);

    return (
        <>
        <div className='all-artists'>
            <div className='all-artists-line justify-content-between'>
                <h3 className='artists-home-part-title'>All Artists:</h3>
                <p className='text-end show-all'>Show All</p>
            </div>
            <div id='artistsCarousel1' className='carousel slide' data-bs-ride='carousel'>
                <div className='carousel-inner'>
                    {vnArtists.length > 0 && (
                        <div className='carousel-item active'>
                            <div className='row artists-row'>
                                {vnArtists.map(artist => (
                                    <div key={artist.id} className='col-2'> 
                                        <div className='artists-card'>
                                            <img src={artist.images[0]?.url} className='d-block rounded-circle artists-images' alt={artist.name} />
                                            <h5 className='artists-name'>{artist.name}</h5>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    )}
                    {usArtists.length > 0 && (
                        <div className='carousel-item'>
                            <div className='row artists-row'>
                                {usArtists.map(artist => (
                                    <div key={artist.id} className='col-2'> 
                                        <div className='artists-card'>
                                            <img src={artist.images[0]?.url} className='d-block rounded-circle artists-images' alt={artist.name} />
                                            <h5 className='artists-name'>{artist.name}</h5>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    )}
                    {ukArtists.length > 0 && (
                        <div className='carousel-item'>
                            <div className='row artists-row'>
                                {ukArtists.map(artist => (
                                    <div key={artist.id} className='col-2'> 
                                        <div className='artists-card'>
                                            <img src={artist.images[0]?.url} className='d-block rounded-circle artists-images' alt={artist.name} />
                                            <h5 className='artists-name'>{artist.name}</h5>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    )}
                </div>
                <button className="carousel-control-prev" type="button" data-bs-target="#artistsCarousel1" data-bs-slide="prev">
                    <span className="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span className="visually-hidden">Previous</span>
                </button>
                <button className="carousel-control-next" type="button" data-bs-target="#artistsCarousel1" data-bs-slide="next">
                    <span className="carousel-control-next-icon" aria-hidden="true"></span>
                    <span className="visually-hidden">Next</span>
                </button>
            </div>
        </div>
        </>
    )
}

export default AllArtists;