Redirect after login set to true in react.js

I have been working on the redirect bug for awhile now. Use Case = When a user types in username and password and clicks login it would normally do a POST to the api for the validation check and if that validation check comes back at 200 then it would redirect to UserContent component. I had commented out the validation check for now just to test if the login will redirect to the UserConent, but it wont. No error given. The Route is even declared in the App.js. So UseHistory() should be able to access that route and push the user to the component. What did I do wrong?

App.js

import React, { useState } from 'react';
import { Container, Nav, Navbar } from 'react-bootstrap';
import { Link, Route, BrowserRouter as Router, Switch } from 'react-router-dom';
import ContactForm from './pages/contactPage';
import Login from './pages/loginPage';
import Footer from './components/footer';
import HomePageContent from './components/homePageContent';
import SignUpForm from './pages/signUpPage';
import { curRentState } from './assets/pageTitles';
import './components/App.css';
import UserContent from './pages/userContent';

function App() {
  //eslint-disable-next-line
  const [loggedIn, setLoggedIn] = useState(false);

  //eslint-disable-next-line
  const [currentState, setCurrentState] = useState({ ...curRentState });

  return (
    <Router>
      <Container className='p-0' fluid={true}>
        <Navbar className='border-bottom' bg='transparent' expand='lg'>
          <Navbar.Brand>RecipeHub</Navbar.Brand>
          <Navbar.Toggle className='border-0' aria-controls='navbar-toggle' />
          <Navbar.Collapse id='navbar-toggle'>
            <Nav className='ml-auto'>
              <Link className='nav-link' to='/'>
                Home
              </Link>
              <Link className='nav-link' to='/contact'>
                Contact
              </Link>
              <Link className='nav-link' to='/signup'>
                Sign Up
              </Link>
              <Link className='nav-link' to='/login'>
                Login
              </Link>
              <Link className='nav-link' to='/userContent'>
                userContent
              </Link>
            </Nav>
          </Navbar.Collapse>
        </Navbar>
        <Switch>
          <Route
            path='/'
            exact
            render={() => (
              <HomePageContent
                title={currentState.home.title}
                text={currentState.home.text}
              />
            )}
          />
          <Route path='/contact' render={() => <ContactForm />} />
          <Route
            path='/signup'
            render={() => <SignUpForm title={currentState.signup.title} />}
          />
          <Route
            path='/login'
            render={() => (
              <Login
                title={currentState.login.title}
                setLoggedIn={setLoggedIn}
                loggedIn={loggedIn}
              />
            )}
          />
          <Route path='/userContent'>
            <UserContent />
          </Route>
          <Route>
            <h1>404 Not Found</h1>
          </Route>
        </Switch>
        <Footer />
      </Container>
    </Router>
  );
}

export default App;

Login.js

import React, { useState } from 'react';
import { Route, Switch, useHistory } from 'react-router-dom';
import Container from 'react-bootstrap/Container';
import SignUpForm from './signUpPage';
// import axios from 'axios';
import UserContent from '../pages/userContent';

export default function LoginOut({ loggedIn, setLoggedIn }) {
  const history = useHistory();
  if (loggedIn) {
    setLoggedIn(false);
  }
  const initialData = { userName: '', password: '' };
  const [formData, setFormData] = useState(initialData);

  const handleChange = (event) => {
    setFormData(() => {
      return { ...formData, [event.target.name]: event.target.value };
    });
  };

  const handleSubmit = (event) => {
    //eslint-disable-next-line
    const [userName, password] = formData;
    event.preventDefault();
    // if (userName && password !== '') {
    //   axios
    //     .post('http://localhost:5000/login', {
    //       data: {
    //         userName: userName,
    //         password: password,
    //       },
    //     })
    //     .then((response) => {
    //       console.log(`statusCode: ${response.statusCode}`);
    //       console.log(response);
    //       if (response.statusCode !== 200) {
    //         alert(response.statusCode);
    //         setLoggedIn(false);
    //         history.push('/signup');
    //       } else {
    //         setLoggedIn(true);
    //         history.push('/userContent');
    //       }
    //     })
    //     .catch((error) => {
    //       console.error(error);
    //     });
    // }
    setLoggedIn(true);
    history.push('/userContent');
  };

  const handleDirect = (event) => {
    event.preventDefault();
    history.push('/signup');
  };

  return (
    <Container
      style={{
        display: 'flex',
        margin: 'auto',
        width: 'auto',
        padding: '10px',
        justifyContent: 'center',
      }}
    >
      <div
        variant='outline-dark'
        className='container w-50'
        style={{
          border: '2px solid blue',
          padding: '5px',
          boxShadow: '2px 2px grey',
        }}
      >
        <div style={{ display: 'flex', justifyContent: 'center' }}>
          <h2 className='page-title1'>Log In</h2>
        </div>
        <form onSubmit={handleSubmit}>
          <div className='mb-3'>
            <label
              htmlFor='userName'
              className='form-label'
              style={{
                color: 'black',
                display: 'flex',
                justifyContent: 'center',
              }}
            >
              Username:
            </label>
            <input
              name='userName'
              type='text'
              className='form-control'
              id='userName'
              value={formData.userName}
              onChange={handleChange}
              required
            />
          </div>
          <div className='mb-3'>
            <label
              htmlFor='password'
              className='form-label'
              style={{
                color: 'black',
                display: 'flex',
                justifyContent: 'center',
              }}
            >
              Password:
            </label>
            <input
              name='password'
              type='password'
              className='form-control'
              id='password'
              value={formData.password}
              onChange={handleChange}
              required
            />
          </div>
          <button
            type='submit'
            className='btn btn-success'
            style={{
              display: 'flex',
              justifyContent: 'center',
              margin: '10px',
            }}
          >
            Log In
          </button>
        </form>
        <button
          onClick={handleDirect}
          type='submit'
          className='btn btn-success'
          style={{ display: 'flex', justifyContent: 'center', margin: '10px' }}
        >
          Sign Up Here!
        </button>
        <Switch>
          <Route exact={true} path='/userContent'>
            <UserContent />
          </Route>
          <Route exact={true} path='/signup'>
            <SignUpForm />
          </Route>
        </Switch>
      </div>
    </Container>
  );
}

Answer

Commented out setLoggedIn(true) and the useHistory() works as indented.