Why is App.js rendering twice on startup when I run my code in react? [duplicate]

I have started a new React app, with the basic setup of index.js and App.js as starting points.

At the start of my App.js file, I am invoking a console.count() function to count the number of times the App component renders.

Even though App.js is invoked only once in index.js, the console.count() function runs twice, which I interpret as App having rendered twice on startup.

My question is, why is it rendering twice?

Below is App.js

import './App.css';


function App() {
  console.count('App.js rendering');

  return (
    <div>

    </div>
  );
}

export default App;

Below is index.js

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();