I don't see output of component in React App

I am new to react, I made a simple component and render some data into this component but I don’t see any output on the browser and I am getting this error on the console "react_dom_client__WEBPACK_IMPORTED_MODULE_1__.render is not a function".

index.js

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

ReactDOM.render(<Counter />, document.getElementById("root"));
// registerServiceWorker();

counter.jsx

import React, {Component} from 'react';

class Counter extends Component {
    state = {
        count : 1,
    }
    render() {
        return (
        <div>
            <span>{this.formatCount()}</span>
        </div>
        );
    }

    formatCount() {
        const {count} = this.state;
        return count === 0 ? 'Zero' : count;
    }
}

export default Counter;

>Solution :

You need to create a root and then render with it:

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Counter />);