I'm sorry for my inexperience, but I've lost my way. I use Browser Router and it gives me the error " "Error react-doma.production.min.js:216" and ""react-dot.production.min.js:260 Uncaught Error" I do not know how to fix it, because I do not even know the error. My code:

App.js

const BaseTemplate = () => (
    <div className="App">
        <BrowserRouter>
            <Routes>
                <Route path="/" exact component={Mainpage}/>
            </Routes>
        </BrowserRouter>
    </div>
);

function App() {
    return (
        <BaseTemplate/>
    );
}

export default App;

Mainpage.js
const localService = new Service();
class Mainpage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            category: '',
        };
    }
    componentDidMount() {
        document.title = 'Catalogs';
        localService.listCategories().then(r => alert(r.data)).catch(e => alert(e.response));
    }

    render() {
        return (
            <div>
                <p>hi?</p>
                {this.state}
            </div>
        );
    }
}

export default Mainpage;

Before that, I wrote on react about a year ago, and then a similar design worked