React JS App rendering white page on reloading in a chat app: How to solve?

The problem is straightforward.
I have a ‘main’ page which collects data through a form and sends that data to a ‘chat’ page.
Everything works completely fine up until I reload the chat page, which renders everything a blank white. There are no errors in the console.
The url at that point should have the username and the the chat-room’s name, which remains in the url as far as I can see, even after having reloaded the page and gotten a blank white page.

This seems to be a popular problem but none of the suggested solutions have worked for me so far. This is what I have tried:

• changed “homepage” in package.json

• tried the whole

  /* index.html 200

• tried HashRouter instead of BrowserRouter, tried including basename
  for Router, tried including browserhistory

• tried downgrading react to earlier versions

None of this has worked so far for me.Here is a live link to the site: https://cyberpunk-chat.onrender.com/

Here is the github repo: https://github.com/mohanamisra/chat-app-full-code

Here’s some relevant code anyways, just in case:

The page importing the routers:

IN App.js

import React from 'react';
import {BrowserRouter as Router, Route, Routes} from 'react-router-dom';
import Join from './components/Join/Join';
import Chat from './Chat';

const App = () => {
    return (
        <Router basename = "/">
            <Routes>
                <Route path='/' element={<Join/>}/>
                <Route path='/chat' element={<Chat/>}/>
            </Routes>
        </Router>
    );
};

export default App;

IN Chat.js

import React from 'react';
import {useState, useEffect} from 'react';
import queryString from 'query-string';
import { useNavigate } from 'react-router-dom';
import io from 'socket.io-client';
import InfoBar from "./components/InfoBar/InfoBar";
import Input from "./components/Input/Input";
import Messages from "./components/Messages/Messages";
import TextContainer from "./components/TextContainer/TextContainer";

import './Chat.css';
const ENDPOINT = 'https://cyberpunkchat.onrender.com';

let socket;

const Chat = () => {
    const navigate = useNavigate();
    const [name, setName] = useState('');
    const [room, setRoom] = useState('');
    const [messages, setMessages] = useState([]);
    const [message, setMessage] = useState('');
    const [users, setUsers] = useState('');

    useEffect(() => {
        const {name, room} = queryString.parse(window.location.search);
        socket = io(ENDPOINT, {transports:['websocket']});
        if(!name || !room) {
            console.log('I forgot...');
        }
        else {
            setName(name);
            setRoom(room);
            socket.emit('join', {name, room}, () => {
            });
        }
    }, [ENDPOINT, navigate]);

    useEffect(() => {
        socket.on('message', (message) => {
            setMessages([...messages, message]);
        })
        socket.on("roomData", ({ users }) => {
            setUsers(users);
        });
    }, [messages]);

    const sendMessage = (event) => {
        event.preventDefault();
        if(message)
            socket.emit('sendMessage', message, () => setMessage(''));
    }

    return(
        <div className = 'outerContainer'>
            <TextContainer users = {users}/>
            <div className = 'container'>
                <InfoBar room = {room}/>
                <Messages messages = {messages} name = {name}/>
                <Input message = {message} setMessage={setMessage} sendMessage={sendMessage}/>
            </div>
        </div>
    )
}

export default Chat;

I’d appreciate any help at all.

Thanks in advance!