Sign In page won't render in my React.js app - reactjs

Question

For some reason, I can't get my SignIn page to render when I click it on the Navbar. The route effectively changes to http://localhost:3000/signin, and that route is set up correctly to render my SignIn component, but the Home page stays the same and the SignIn button changes to "loading...". I'm using google authentication for the SignIn component, and I'm using an AuthCheck fallback and Suspense fallback in my Navbar.
NAVBAR CODE:
import React, { Suspense } from "react";
import { makeStyles } from "#material-ui/core/styles";
import AppBar from "#material-ui/core/AppBar";
import Toolbar from "#material-ui/core/Toolbar";
import Typography from "#material-ui/core/Typography";
import Button from "#material-ui/core/Button";
import Logo from '../assets/images/basketball.png';
import { Link } from 'react-router-dom';
import {AuthCheck} from 'reactfire'
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
},
menuButton: {
marginRight: theme.spacing(2),
},
title: {
flexGrow: 1,
},
logo: {
height: "50px",
},
link: {
color: "black",
textDecoration: "none",
},
}));
export const Navbar = () => {
const classes = useStyles();
return (
<div className={classes.root}>
<AppBar position="static">
<Toolbar style={{ alignItems: "center", justifyContent: "center", backgroundColor: "rgb(0, 255, 225)" }}>
<Link to="/">
<img src={Logo} alt="Logo" className={classes.logo} />
</Link>
<Typography style={{flexDirection: 'column', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'black' }} variant="h2" className={classes.title}>
NBA Stat Reference
</Typography>
<Suspense fallback={'loading...'}>
<AuthCheck fallback={
<Button style={{color: "black"}}>
<Link className={classes.link} to="/signin">Sign In</Link>
</Button>
}>
<Button color="black">
<Link className={classes.link} to="/">Home</Link>
</Button>
<Button color="black">
<Link className={classes.link} to="/dashboard">Dashboard</Link>
</Button>
<Button color="black">
<Link className={classes.link} to="/about">About</Link>
</Button>
</AuthCheck>
</Suspense>
</Toolbar>
</AppBar>
</div>
);
}
SIGN IN CODE:
import React, { useState } from 'react'
import firebase from 'firebase/app';
import { AuthCheck, useAuth } from 'reactfire';
import 'firebase/auth';
import { Input } from './Input';
import { Container, Button, makeStyles, Typography, Snackbar, } from '#material-ui/core';
import { withRouter } from "react-router-dom";
import MuiAlert from '#material-ui/lab/Alert';
import { Navbar } from './Navbar'
const Alert = (props) => {
return <MuiAlert elevation={6} variant="filled" {...props} />
}
const useStyles = makeStyles({
googleButton:{
backgroundColor: 'rgb(66,133,244)',
marginTop: '2em',
padding: '0',
color: 'white',
height: '50px',
width: '240px',
border: 'none',
textAlign: 'center',
boxShadow: 'rgb(0 0 0 / 25%) 0px 2px 4px 0px',
fontSize: '16px',
lineHeight: '48px',
display: 'block',
borderRadius: '1px',
fontFamily: 'Roboto, arial, sans-serif',
cursor: 'pointer'
},
googleLogo:{
width: '48px',
height: '48px',
display: 'block'
},
typographyStyle: {
fontFamily: 'Roboto, arial, sans-serif;',
textAlign: 'center',
fontSize: '2em'
},
containerStyle: {
marginTop: '2em'
},
snackBar: {
color: 'white',
backgroundColor: '#4caf50'
}
});
export const SignIn = withRouter((props) => {
const auth = useAuth();
const classes = useStyles();
const { history } = props;
const [open, setOpen] = useState(false);
const handleSnackOpen = () => {
setOpen(true)
};
const handleSnackClose = (event, reason) => {
if (reason === "clickaway") {
return;
}
setOpen(false);
history.push("/");
};
const sign_in = async () => {
const response = await auth.signInWithPopup( new firebase.auth.GoogleAuthProvider());
if(response.user){
handleSnackOpen();
}
};
const sign_out = async () => {
await auth.signOut();
}
return (
<div>
<Navbar />
<Container maxWidth = 'sm' className={classes.containerStyle}>
<Typography className={classes.typographyStyle}>Sign In Below</Typography>
<form>
<div>
<label htmlFor="email">Email</label>
<Input name="email" placeholder="Place Email Here" />
</div>
<div>
<label htmlFor="password">Password</label>
<Input name="password" placeholder="Place Password Here" />
</div>
<Button type="submit" variant='contained' color='primary'>Submit</Button>
</form>
<AuthCheck fallback={
<Button className={classes.googleButton} onClick={sign_in}>Sign In With Google</Button>
}>
<Button variant='contained' color='secondary' onClick={sign_out}>Sign Out</Button>
</AuthCheck>
<Snackbar message={'Success'} open={open} autoHideDuration={6000} onClose={handleSnackClose}>
<Alert onClose={handleSnackClose} severity="success">
Successful Sign In - Redirect in 6 seconds
</Alert>
</Snackbar>
</Container>
</div>
)
});
INDEX.JS (ROUTES)
import React from 'react';
import ReactDOM from 'react-dom';
import {Home} from './client/components/Home';
import {About} from './client/components/About';
import {Dashboard} from './client/components/Dashboard';
import {SignIn} from './client/components/SignIn'
import './index.css'
import {
BrowserRouter as Router,
Route,
Switch
} from "react-router-dom";
import {firebaseConfig} from './firebaseConfig';
import {FirebaseAppProvider, AuthCheck} from 'reactfire';
import 'firebase/auth';
import {Provider} from 'react-redux';
import {store} from './client/Redux/store';
import * as ReactDOMClient from 'react-dom/client';
const root = ReactDOMClient.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<FirebaseAppProvider firebaseConfig={firebaseConfig} suspense={true}>
<Provider store={store}>
<Router>
<Switch>
<Route exact path="/">
<Home />
</Route>
<Route path="/about">
<About />
</Route>
<Route path="/dashboard">
<Dashboard />
</Route>
<Route path="/signin">
<SignIn />
</Route>
</Switch>
</Router>
</Provider>
</FirebaseAppProvider>
</React.StrictMode>
);