React + Express JS project not serving all routes in production link but works correctly when serving build folder

I have a NodeJS project using an express back-end (run on port 5000) and a ReactJS front end (run on port 3000) in the same project. I am able to run these projects a the same time locally with no issues. I am also able to use ‘npm run build’ and serve the static files on http://localhost:3000 with no issues in the production build.

However, when I publish these changes to Azure via the ‘Azure app services” extension in VS Code – Only the home directory works correctly. If I try to access another page, I get a 401 unauthorized error.

Project file structure:

 - MyApp:
   - .vscode
   - Client:
      - build
      - node_modules
      - public
      - src
      - package.json
      - package-lock.json
   - config
   - controllers
   - middleware
   - models
   - index.js
   - package.json
   - package-lock.json

Client–>src–>App.js (client side routes)

function App() {
  return (
    <Routes>
      
      <Route path="/" element={<Layout />}>
        {/* Public routes*/}
        <Route exact path='Login' element={<Login/>}  />
        <Route path="unauthorized" element={<Unauthorized />} />
        <Route path="invalidinvite" element={<InvalidInvite />} />
        <Route path='Application' element={<Application />}  />
        

        {/* Protected routes*/}

        <Route element={ <PersistLogin /> }>
          <Route element={<RequireAuth allowedRoles={[1, 2]}/>}> 
            <Route exact path="/" element={<Invite/>} />
          </Route>

          <Route element={<RequireAuth allowedRoles={[1, 2]}/>}> 
            <Route exact path='Submitted' element={<Submitted/>} />
          </Route>

          <Route element={<RequireAuth allowedRoles={[1, 3]}/>}> 
            <Route exact path='Approved' element={<Approved/>} />
          </Route>
        </Route>

        {/* Catch all*/}
        <Route path="*" element={Error} />
      </Route>
    </Routes>
  );
}

Client–>src–>index.js:

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <AuthProvider>
        <Routes>
          <Route path="/*" element={<App />} />
        </Routes>
      </AuthProvider>
    </BrowserRouter>
  </React.StrictMode>
);

index.js (server):

require('dotenv').config();
const express = require('express');
const app = express();
const path = require('path');
const bodyParser = require('body-parser');
const cors = require('cors');

const sequelize = require("./config/database");

const loginController = require('./controllers/loginController');

const verifyJWT = require('./middleware/verifyJWT');
const verifyRoles = require('./middleware/verifyRoles');
const cookieParser = require('cookie-parser');
const credentials = require('./middleware/credentials');
const corsOptions = require('./config/corsOptions');

const PORT = process.env.PORT || 5000;


//Applying middleware
app.use(credentials); 
app.use(cors(corsOptions)); 
app.use(express.json()); 
app.use(bodyParser.urlencoded({extended: true}));
app.use(cookieParser());

app.use(express.static(path.join(__dirname, 'Client', 'build')));

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'Client', 'build', 'index.html'));
});

app.route('/login').post(loginController.handleLogin); //public

app.use(verifyJWT);

app.route('/invites').get(verifyRoles(1, 2), invitesController.getAllInvites); //requires verified jwt

I have also tried modifying the following code from:

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'Client', 'build', 'index.html'));
});

TO:

app.get('/*', (req, res) => {
  res.sendFile(path.join(__dirname, 'Client', 'build', 'index.html'));
});

But when I do this, I instantly get errors in the console and cannot load the page:

I am at a loss for what needs to be done to resolve this. Any help or input would be appreciated.