How should I return HTML in a React.js class component without getting an error?

Question

I am having issues trying to set up a couple of routes in my react web application, and I was hoping someone more knowledgable would be able to help me better understand whats going on.

So, in App.js I am using a creating a BrowserRouter, inside of it I have some HTML, then I also have a few Routes should show a different component on the screen depending on what URL you are at, or if you follow a within those class components:

// imports omitted for simplicity

function App() {
  return (
    <BrowserRouter>
      <NAVBAR />
      <div id="window_container">
        <div id="display_container">
          <Routes>
            <Route path="/" element={() => VIEW_LIST } />
            <Route path="/browse" element={() => BROWSE_ITEMS } />
          </Routes>
        </div>
      </div>
    </BrowserRouter>
  );
}

export default App;

Where I am running into issues is that whenever I try to access one of those URLs in a browser, none of my elements from that component render and I get an error in the console telling me that:

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.

Where I think my issue lies is somewhere in my component class with how I try to build my component with data retrieved from some endpoint.

Here is an example of what one of my component classes looks like:

export class VIEW_LIST extends Component {
    constructor (props) {
        super(props);
        this.state = {
            list_elements:''
        }
    }

    componentDidMount() {
        getList()
            .then(res => res.json())
            .then(data => {
                console.log(data);
                this.setState({list_elements: data});
                return(
                    <div>
                        I got the data
                    </div>
                )
            })
            .catch(err => {
                console.log(err);
            })
    }

    render () {
        if(this.state.list_elements != null) {
            return (
                <div id="merchant_wrapper">
                </div>
            )
        } else {
            return (
                <div id="merchant_loading"> 
                    Loading...
                </div>
            )
        }
        
    }

}

Does anyone have any idea what might be going on here?

NO THAT DOES NOT ANSWER MY QUESTION STOP DOING THAT TO ALL MY QUESTIONS