Problem with gh pages and react-router-dom

Question

I'm trying to deploy a React app in gh pages but it does not work, even though it works locally. According to my searches, pages does not work with router-dom.

I tried to change BrowserRouter to HashRouter, set the basename parameter of HasRouter through process.env.PUBLIC_URL and /React, put inside of route param exact, but nothing works.

When i deploy it, just returns a blank page. I tried too with vercel but it also gives a blank page.

This is the Index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { HashRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
        <HashRouter basename="/React">
                <App />
        </HashRouter>
);

This is the App.js

import { BrowserRouter, HashRouter, Route, Routes } from 'react-router-dom';
import './App.css';
import ApiCall from './components/ApiCall';
import Location from './components/Location';
import Spec from './components/Spec';

function App() {
  return (
        <Routes>
          <Route path='/' element={ <ApiCall/> }/>
          <Route path='/specs/*' element={ <Spec/> }/>
          <Route path='/location/*' element={ <Location/> }/>
        </Routes>

  );
}

export default App;

And this is the Package.json (this is just the first lines )

{
  "homepage":"https://lAlej.github.io/rick-and-morty-app",
  "name": "rick-and-morty-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "bootstrap": "^5.2.3",
    "gh-pages": "^5.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.8.2",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

I just wanna understand why it doesn't work