History.push changes url but does not load component

Question

I want to have a simple button that when clicked redirects a user to a route defined in my roompage.js file. The file route correctly updates but the page doesnot render

my home file:

import React from "react";
import { useHistory } from "react-router-dom";
function Home() {
    let history =useHistory();
    const joinroompage= ()=>{
        history.push('/joinroom');
    }
    const joinroompageashost= ()=>{
        history.push('/joinroom?host=true');
    }
    

  return (
        
      <div className=" ">
        <button onClick={()=>{joinroompage()}} className=" ">
            Join a meeting 
        </button>
        <button onClick={()=>{joinroompageashost()}} className="">
            Host a meeting
        </button>
      </div>
  );
}

I click on the Join button the route gets updated but the page doesnt render

Here is my app.jsx file:

import React from 'react';
import { ReactDOM } from 'react-dom';
import Home from './components/Home';
import Roompage from './components/roompage';
import {BrowserRouter as Router,Switch,Route} from 'react-router-dom'
import { createBrowserHistory } from "history";
const appHistory = createBrowserHistory();
function App() {
  return (
    <div className="App">
     <Router history={appHistory}>
      <Switch>
        <Route path='/home'>
          <Home/>
        </Route>
              <Route path='/joinroom'>
          <Roompage />
        </Route>
      </Switch>
     </Router>
    </div>
  );
}

I am using

react-router-dom @5.2.0

react @18.2.0