Why nested routes don't work in react-dom-router?

Question

React

Here is my APP

import React, {Component, Fragment} from 'react';

import { Provider } from 'react-redux';
import store from "./store/index";

import './main.sass';

import {  
  BrowserRouter as Router,
  Switch,
  Route,
  Redirect
} from 'react-router-dom';


// pages 
import DefaultHome from './components/DefaultHome/DefaultHome';
import Project from './containers/Project';
import AuthContainer from './containers/AuthContainer';


function App () { 
  return (
    <Provider store={store}>
      <Router>
        <Switch>

          <Route exact path="/">
            {!store.getState().auth.isAuthorized && <Redirect to="/auth" />}
          </Route>

          <Route path="/auth">
            <AuthContainer />
          </Route>

          <Route path="/project">
            <Project />
          </Route>  

        </Switch>
      </Router>
    </Provider>
  );

}

export default App;

AuthContainer calls the Auth component, the code of which is:

import React, { useState, Component } from 'react';
import {  
  BrowserRouter as Router,
  Switch,
  Route,
  useRouteMatch
} from 'react-router-dom';

import DefaultHome from '../DefaultHome/DefaultHome';
import Register from './Register';
import Login from './Login';

function handleInputChange(event, setState, fields) {
  const target = event.target;
  const value = target.name === 'isGoing' ? target.checked : target.value;
  const name = target.name;

  setState({
    data: { ...fields.data, [name]: value }
  });
}



export default class Auth extends Component {
  
  constructor(props) {
    super(props);
    this.state = { data: '' };
  }

  handleInputChange(event, setState) {
    const target = event.target;
    const value = target.name === 'isGoing' ? target.checked : target.value;
    const name = target.name;
  
    this.setState({
      data: { ...this.state.fields.data, [name]: value }
    });
  }

  formOnSubmit(e) {
    e.preventDefault();
    this.props.sendRegisterData(this.state.fields.data);
  }
  
  render() {
    

    return (
      

        <Switch>
          <Route exact to='/auth'>
            <DefaultHome />
          </Route>
          <Route to='/auth/register'>
            <Register sendRegisterData={this.props.sendRegisterData} handleInputChange={this.handleInputChange.bind(this)} />
          </Route>
          <Route to='/auth/login'>
            <Login handleInputChange={this.handleInputChange.bind(this)} />
          </Route>
          
        </Switch>
    
      
    );
  }
}

The problem is child routes, they always render only the top component, despite the fact that the url changes.