React loader’s state doesn’t change

I am trying to implement a loading spinner into my React app, but I have a problem with changing its state. It is supposed to appear when the data to display is being downloaded through Axios (once the function getProjectDetails gets the data, see componentDidMount) and then disappear. But right now it’s just spinning forever. What am I doing wrong?

export function StyledTabs(props) {
    const [value, setValue] = React.useState(0);
    const [loading, setLoading] = useState(true);
    


    const handleChange = (event, newValue) => {
        console.log(props)
        setValue(newValue);
    };

    function tabProps(index) {
        return {
            id: `vertical-tab-${index}`,
            'aria-controls': `vertical-tabpanel-${index}`,
        };
    }

    return loading ? <LoadingComponent /> : (
        <div>
            <AppBar position="static" color="transparent">
                <Tabs
                    value={value}
                    onChange={handleChange}
                    variant="scrollable"
                    scrollButtons="on">
                    <Tab label="Project Information" {...tabProps(0)} />
                    <Tab label="Group Procurement Information" {...tabProps(1)} />
                    <Tab label="Other Information" {...tabProps(2)} />
                    <Tab label="Improvement Calculation* (Absolute Number)" {...tabProps(3)} />
                    <Tab label="Project Description" {...tabProps(4)} />
                </Tabs>
              </AppBar>
             </div>

   export default class ProjectDetails extends React.Component {
    state = {  
        projectDetails: {
            additionalEntities: "a5ff008e-eb77-4f4a-9ee7-0d863ffed1ed",
            additionalEntityName: "",
            bussinessCFO: 0,
            bussinessController: 0,
            bussinessOwner: 0,
            categoryName: "Technical Marine (Strategic)",
            contractEndDate: "2021-08-26T00:00:00",
            contractStartDate: "2021-08-26T00:00:00",
            description: "Test Desctription",
            descriptionId: 1,
            ebitda: 0,
            gpCategory: "fb6028e5-4273-4176-8cdb-978de1fd2e99",
            gpSubCategory: "e3a22c6e-6ffa-43e4-867d-0f51e90540e3",
            legalEntity: "4af62e99-abb4-41c5-835e-063a5f4eaa46",
            nameOfSuplier: "string",
            OverallImprovementTypeId: 1,
            overallImprovementTypeName: "OPEX",
            projectId: "351b2f09-d879-4db1-02b1-08d968707193",
            projectName: "Test Project",
            FullProjectNumber: "000.00",
            projectResponsible: 0,
            subCategoryName: "Terminal Equipment",
            valueImprovementTypeId: 1,
            valueImprovementTypeName: "EBIT"
        }
    }

    componentDidMount() {
        this.getProjectDetails();
        this.setState(() => {
          return  {loading: false}
        })
    }

    getProjectDetails() {
        customInstance.get('Project/' + this.id).then((response) => {
            const projectDetails = response.data;
            this.setState((state) => {
                state = response.data;
                this.state.projectDetails = response.data;
                return state;
            });
        });
        console.log(this.state.projectDetails);
    }