Webpack and React-Router-Dom

React Router doesn't work when I create params in URL ("profile/:id")

When I login my app throw on / But I do navigate('/profile')

It works with HashRouter instead BrouserRouter, but when I reload page Router throw on / again

Routes.js

import React from "react";
import { Route, Routes, Navigate} from "react-router-dom";
import FindFr from "../components/FindFr/FindFr";
import Main from "../components/main/Main";
import Profile from "../components/Profile/Profile";
import StartPage from "../components/StartPage/StartPage";
import Login from "../components/Login/Login";
import Registration from "../components/Registration/Registration";

const AppRoute = ({isAuth}) => {

    return isAuth ?(
            <Routes>
                <Route path="/" element={<StartPage />} />
                <Route path="/profile/:id" element={<Profile />} />
                <Route path="/search" element={<FindFr />} />
                <Route path="/messages" element={<Main />} />
                <Route path="*" element={<Navigate to="/" replace />}/>
            </Routes>
    ) :
        (
            <Routes>

                <Route path="/login" element={<Login />} />
                <Route path="/registration" element={<Registration />} />
                <Route path="*" element={<Navigate to="/login" replace />}/>
            </Routes>
        )

}

Webpack

const path = require('path')
const {CleanWebpackPlugin} = require("clean-webpack-plugin")
const HTMLWebpackPlugin = require("html-webpack-plugin")

module.exports = {
    mode: "development",
    entry: ["@babel/polyfill","./src/index.js"],
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "[name].[hash].js",
        publicPath: "/"
    },
    devServer: {
        port: 3000,
        historyApiFallback: true
    },
    resolve: {
        extensions: ['.js', '.json', '.jsx'],
    },
    plugins: [
    new HTMLWebpackPlugin({template: "./src/index.html"}),
        new CleanWebpackPlugin()
    ],
    module: {
        rules: [
            {
                test: /\.(css|less)$/,
                use: ["style-loader", "css-loader", "less-loader"]
            },
            {
                test: /\.(jpg|jpeg|svg|png)$/,
                use: ["file-loader"]
            },
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["@babel/preset-env","@babel/preset-react"]
                    }
                }
            }
        ],
    }
}

App.js

import React, {useEffect} from "react";
import AppRoute from "../router/routes";
import Navbar from "./Navbar/Navbar";
import './App.less'
import {useDispatch, useSelector} from "react-redux";
import {checkAuth} from "../actions/auth";

const App = () => {

    const isAuth = useSelector(state => state.auth.isAuth);
    const dispatch = useDispatch()

    useEffect(() => {
        dispatch(checkAuth());
    });

    return (
            <div>
                <Navbar isAuth={isAuth}/>
                <div className="grey-background">
                    <AppRoute isAuth={isAuth}/>
                </div>
            </div>
        )
}

export default App

Full project https://github.com/MishaJSR/testWebPack.git