ComponentDidMount called twice

ComponentDidMount in my overarching App component is being called twice, and I can't figure out why. So far google suggests this is usually due to a lack of keys that means the app has to assume things have changed and delete everything instead of just the relevant portion of the DOM, but I stripped my app as bare as I can get reasonably get it and it's still happening.

index.tsx:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App global={{baseUrl: "http://localhost", port: 54887}} />
  </React.StrictMode>
);

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

App.tsx:

import React from 'react'
import CurrentItems, { CurrentItemsProps } from './CurrentItems';
import Navigation, { NavigationProps } from './Navigation';
import { CombinedNavigationProps } from './Navigation';
import './App.css';
import { GlobalProps } from './GlobalProps';

interface AppProps extends GlobalProps {}

interface AppState {
  navigation: NavigationProps;
}

class App extends React.Component<AppProps, AppState> {
  constructor(props: AppProps){
    super(props);
    //this.onSelectedViewChange = this.onSelectedViewChange.bind(this);
  }

  componentDidMount(){
    console.log("app did mount");
  }

  onSelectedViewChange(view: string) {
  }

  render(){
    if(this.state === undefined || this.state === null){
      return (<div>Loading...</div>);
    } else {
      return (
        <div>
          Loaded.
        </div>
      );
    }
  }
}

export default App;

Link to github for full code Screenshot of console output: