Count Button Not Appearing

I’ve been following along with React JS – React Tutorial for Beginners by Programming with Mosh on YouTube; however, I have been having difficulty with importing complex components into a list. The DOM will not update with the multiple components in a list. After playing around with the files, I can no longer see the number increment next to the increment button. I don’t have the faintest idea what happened here. What am I missing for the number to appear?

//Counter.jsx

import React, { component } from "react";

class Counter extends Component {
    state = {
    count: 0
};
styles = {
    fontSize: 10, 
    fontWeight: "bold",
};
handleIncrement = () => {
    this.setState({ count: this.state.count + 1 });
};

render() {
    return (
        <React.Fragment>
            <span style={this.styles} className={this.getBadgeClasses()}>
                {this.formatCount()}
            </span>
            <button
                onClick={this.handleIncrement}
                className="btn btn-secondary btn-sm"
               >
                Increment
            </button>
        <React.Fragment>
            );
}
getBadgeClasses() {
    let classes = "badge m-2 badge-";
    classes += this.state.count === 0 ? "warning" : "primary";
    return classes;
}

formatCount() {
    const { count } = this.state;
    return count === 0 ? "Zero" : count;
    }
}
export default Counter;

//Counters.jsx

import React, { Component } from "react";
import Counter from "./Counter";

class Counters extends Component {
    state = {};
    render() {
        return (
            <div>
                <Counter />
                <Counter />
                <Counter />
                <Counter />
            </div>
        );
    }
}

export default Counters;

//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 Counters from "./Components/Counters";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
    <React.StrictMode>
        <Counters />
    <React.StrictMode>
);
reportWebVitals();

Image of the DOM

I have tried to restore everything back to before creating the Counters file where it displayed the Counter file in the DOM but that doesn’t seem to fix the issue. I added code blocks of each files: Counter.jsx, Counters.jsx, and index.js. I also attached a img of the DOM.