how to set default Routing with React

I just started with react js and was trying to develop a webpage, I generated an application with nrwl nx to have a monorepo and its advantages. My project starts without problems, and shows me the starting page of nrwl nx, I now want to change the default route from nrwl to my custom component.

I followed this tutorial enter link description here in order to do that but it does not work. This is my currrent code maybe it is something small I am missing but can not find it, even though I have it the same way as the tutorial, the error I am getting is

Uncaught Error: Target container is not a DOM

this is my app.tsx

import React from 'react';

import './app.scss';
import { BrowserRouter, Route, Link } from 'react-router-dom';

import {LoginComponent} from "@moniesta-admin/login-screen";

export const App = () => {
  return (
    <BrowserRouter>
      <div className="app">
        <div className="app-content">
          <Route path="/" exact component={LoginComponent} />
        </div>
      </div>
    </BrowserRouter>
  );
};

export default App;

this is my custom component:

import React from 'react';

import { Route, Link } from 'react-router-dom';

import './login-component.scss';

/* eslint-disable-next-line */
export interface LoginComponentProps {}

export const LoginComponent = (props: LoginComponentProps) => {
  return (
    <div>
      <h1>Welcome to login-component!</h1>

      <ul>
        <li>
          <Link to="/">login-component root</Link>
        </li>
      </ul>
      <Route
        path="/"
        render={() => <div>This is the login-component root route.</div>}
      />
    </div>
  );
};