Javascript – New to React. Wokring on a Youtube tuorial that is a bit outdated so mine isnt the exact same but I cannot get passed this one part

I am running my spring boot application on port 8080 and have set up a react app on visual code. I created a proxy for the connection. I am using render() to have a ‘Loading’ piece pop up as the information is grabbed but its stuck at Loading and I dont know why.

Here is the Category.js

import React, { Component } from 'react';

class Category extends Component {

    state = {
        isLoading : true,
        Categories : []
    }

     async componentDidMount(){
        const response = await fetch('/api/categories');
        const body = await response.json();
        this.setState({Categories :body, isLoading: false});
        }
     render(){ 
        const{Categories, isLoading} = this.state;
        if(isLoading)
            return(<div>Loading......</div>);
        
        return (
            <div>
                <h2>Categories</h2>
                {
                    Categories.map( category =>
                    <div id={category.id}>
                        {category.name}
                    </div>
                    )
                }
            </div>
        );
    }
}
 
export default Category;

And…… Here is the index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import Category from './Category';

import reportWebVitals from './reportWebVitals';
//import * as serviveWorker from './serviceWorker';

//ReactDOM.render(<Category/>, document.getElementById('root'));
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Category/>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))

reportWebVitals();
//serviveWorker.unregister();

I am trying to get passed this loading state and show the actual categories.