How do I rerender react once a request is received from the backend?

I'm trying to implement a filter table in my MERN stack website. Currently, I am able to receive the table data, send it to the backend and receive the filtered data from the backend. The problem is I don't know how to re-render the page to just show the filtered data and not all the data which is what is initially shown when no one submits anything to be filtered.

Here is what I've tried but everytime I click submit, I can see the data by console.log, like I know that I received the filter data from the backend, but it doesn't show on the screen and the screen just goes blank.

import React, { useEffect, useState } from 'react'
import ProjectDetails from '../ProjectDetails'


class Dropdown extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            projects: null,
            sdg: 'SDG 1: No Poverty',
            assignment_type: 1,
            theme: 'Demographic'
        };
  
        this.handleSDGChange = this.handleSDGChange.bind(this);
        this.handleAssignmentChange = this.handleAssignmentChange.bind(this);
        this.handleThemeChange = this.handleThemeChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }
    
    // Handling all 3 input changes
    handleSDGChange(event) {
      this.setState({sdg: event.target.value});
    }

    handleAssignmentChange(event) {
        this.setState({assignment_type: event.target.value});
    }

    handleThemeChange(event) {
        this.setState({theme: event.target.value});
    }

    // Handling all 3 input submissions
    handleSubmit(event) {
        console.log(this.state.sdg)
        alert(this.state.sdg + '--- Assignment Type: ' + this.state.assignment_type + '--- Theme: ' + this.state.theme);
        event.preventDefault();

        console.log(this.state.projects)

        const data = {
            sdg: this.state.sdg, 
            assignment_type: this.state.assignment_type,
            theme: this.state.theme
        }

        fetch(`/api/projects/filter?sdg=${encodeURIComponent(data.sdg)}&assignment_type=${encodeURIComponent(data.assignment_type)}&theme=${encodeURIComponent(data.theme)}`, {
            method: "GET",
            headers: {
                    'Content-Type': 'application/json;charset=utf-8', 
                },
        })
            .then(response => response.json())
            .then(json => console.log(json))
            .then(json => this.setState({projects: json}))
            .then(console.log(this.state.projects))
    }

    async componentDidMount() {
        const response = await fetch('/api/projects')
        const json = await response.json()

        if (response.ok) {
            this.setState({projects: json})
        }
        
    }

    

    render() {
      return (
        <div className="filterHome">
            <div className="filterTableContainer">
                <div className="filterTableTitle">
                    Filter Table
                </div>
                <div className="filterSDGDropDown">
                    <form onSubmit={this.handleSubmit}>
                        <label>SDG:</label>
                        <select value={this.state.sdg} onChange={this.handleSDGChange}>
                            <option value="">Select SDG</option>
                            <option value="SDG 1: No Poverty">SDG 1: No Poverty</option>
                            <option value="SDG 2: Zero Hunger">SDG 2: Zero Hunger</option>
                            <option value="SDG 3: Good Health & Well Being">SDG 3: Good Health & Well Being</option>
                        </select>

                        <label>Assignment Type:</label>
                        <select value={this.state.assignment_type} onChange={this.handleAssignmentChange}>
                            <option value="1">1: Discussion Project</option>
                            <option value="2">2: PDF Case study</option>
                            <option value="3">3: Community Project</option>
                        </select>

                        <label>Theme:</label>
                        <select value={this.state.theme} onChange={this.handleThemeChange}>
                            <option value="">Select Theme</option>
                            <option value="Demographic">Demographic</option>
                            <option value="Economical">Economical</option>
                            <option value="Socio-cultural">Socio-cultural</option>
                            <option value="Technological">Technological</option>
                            <option value="Ecological">Ecological</option>
                            <option value="Poltical">Poltical</option>
                        </select>

                        <input type="submit" value="Submit" />
                        
                    </form>
                </div>
            </div>

            {/* Lists projects */}
            <div>
                <div className="projects">
                    {this.state.projects && this.state.projects.map((project) => (
                        <ProjectDetails key={project._id} project={project}/>
                    ))}
                </div>
            </div>
        </div>
      );
    }
  }
export default Dropdown

How can I change the code so that I make it show all the projects (I initially get this by using componentDidMount initially and then only the filtered ones once I click submit on the filter table?