the site in question is hosted on render and when I navigate to other routes already on the home page everything works normally but when I enter myself the url of this route on the browser example: ‘https://exemple.com/profile I am always redirected to the page index.html. yet profile is a well-configured route here is the file index.js placed in the routes folder

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Profil from './Profil';
import Home from './Home';

const Index = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/profil" element={<Profil />} /> {/* Corrigé ici */}
      </Routes>
    </Router>
  );
}

export default Index

Here is the app.js file:

import React, { useEffect, useState } from 'react';
import Routes from "./routes/index";
import { UidContext } from './AppContext';
import axios from 'axios';



const App = () => {

//private javascript



  return (
    <>
<UidContext.Provider value={uid}>
<Routes />
</UidContext.Provider>

    </>
   
  );
};

export default App;

and finally here is the application’s index.js file:

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { Provider } from "react-redux";
import { applyMiddleware, createStore } from "redux";
import thunk from "redux-thunk";
import rootReducer from "./reducers";
// dev tools
import { composeWithDevTools } from "redux-devtools-extension";
const store = createStore(
  rootReducer,
  composeWithDevTools(applyMiddleware(thunk))
);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(

      <Provider store={store}>
        <App />
      </Provider>

);

Help me to make sure that when a specific route is written in the url the component concerned by this route is displayed instead of being redirected to the page index.html

I tried to modify the file .render.yaml