React js page reload 404 eror using react-router-dom - reactjs

Question

Hi i am using react js and react-router-dom for routing.My issue is that when i reload the page i gets below error on browser.my code works fine local server. but on live server i got below error.
Not Found
The requested URL was not found on this server.
Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.
here is my htacess file
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !=/favicon.ico
RewriteRule ^ index.html [L]
</IfModule>
here is my routing file
import React from "react";
// Importing Routing Library
import { Navigate } from "react-router-dom";
// Importing Layouts Files
import MainLayout from "src/layouts/MainLayout";
import DashboardLayout from "src/layouts/DashboardLayout";
import ErrorLayout from "src/layouts/ErrorLayout";
// Importing View Files
import NotFoundView from "src/views/errors/NotFoundView";
import LoginView from "src/views/auth/LoginView";
import DashboardView from "src/views/app/DashboardView";
import { AddInstallView } from "src/views/app/Install/AddInstallView";
import { NewInstallView } from "src/views/app/Install/NewInstallView";
import { ExistInstallView } from "src/views/app/Install/ExistInstallView";
import { UpdateInstallView } from "src/views/app/Install/UpdateInstallView";
import { SuccessView } from "src/views/app/Install/SuccessView";
const routes = (loggedIn) => {
//alert(loggedIn);
const routes = [
{
path: "/*",
exact: true,
element: <Navigate to="/auth/login" />,
},
{
path: "/app",
element: loggedIn ? <DashboardLayout /> : <Navigate to="/auth/login" />,
children: [
{ path: "/dashboard", element: <DashboardView /> },
{ path: "/install/add", element: <AddInstallView /> },
{ path: "/install/add/new", element: <NewInstallView /> },
{ path: "/install/list", element: <ExistInstallView /> },
{ path: "/replacement", element: <UpdateInstallView /> },
{ path: "/success", element: <SuccessView /> },
{ path: "/*", element: <Navigate to="/error/404" /> },
],
},
{
path: "/auth",
element: !loggedIn ? <MainLayout /> : <Navigate to="/app/dashboard" />,
children: [
{ path: "/login", element: <LoginView /> },
{ path: "/*", element: <Navigate to="/error/404" /> },
],
},
{
path: "/error",
element: <ErrorLayout />,
children: [
{ path: "/404", element: <NotFoundView /> },
{ path: "/*", element: <Navigate to="/error/404" /> },
],
},
];
return routes;
};
export default routes;
What is the solution for this??