The issue i am facing is i am not able to set my state in the class based component i don't know whats wrong with it i have created a very small project before this so that i can practice the state manipulation and i am doing the same way as test project working please help

import React, { Component } from 'react';
import { Header } from './components';
import { ProductListing, ProductDetail, Cart } from './Screens';

import {
    Routes,
    Route,
    Navigate
} from "react-router-dom";

export class App extends Component {
    constructor(){
        super();
        this.state = {
            products: [],
            cart: []
        }
    }

    async componentDidMount() {
        const query = `
    query{
      categories {
          name
          products {
            id,
            name,
            inStock,
            gallery,
            category
          }
        }
  }
    `;
        fetch("http://localhost:4000", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "Accept": "application/json",
            },
            body: JSON.stringify({
                query
            })
        }).then(response => {
            return response.json();
        }).then(data => {
            this.setState({
                products: data.data.categories,
            })
            console.log("The data i am getting is", data.data.categories);
            
        })
        console.log("The prodcuts are", this.state.products)
    }
    render() {
        return (
            <>
                <Header />
                <Routes>
                    <Route path="/" element={<Navigate replace to="/all" />} />
                    <Route path="/:category" element={<ProductListing products={this.state.products} />} />
                    <Route path="/product" element={<ProductDetail />} />
                    <Route path="/cart" element={<Cart />} />
                </Routes>
            </>
        )
    }
}

export default App

I don't understand why this piece of code is not working it is supposed to set the data and send it to the component but is not doing that actually and neither giving error

this.setState({
             products: data.data.categories,
         })

the below piece of code

console.log("The data i am getting is", data.data.categories);