React Router not re render same page when a new dynamic URL is pushed

Question

I'm trying to load the same page but with different parameters using the history.push()method of React Router but the page only renders for the first time when I go to the page from a different URL. There is a category dropdown whose options if selected will take me to the same page but change the search params in the URL in the Category.js file. Then the content stays just the same but only the URL changes. Any help is appreciated.

App.js file

import React, { useState, useCallback, useEffect } from 'react';
import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';
import './App.css';
import Homepage from './pages/Containers/Homepage';
import Header from './shared/NavComponents/Header';
import Gamepage from './pages/Containers/Gamepage';
import CategoryPage from './pages/Containers/CategoryPage';
import AuthContext from './shared/Contexts/AuthContext';


function App() {
  const [state, setState] = useState({
    loggedIn: false
  });

  useEffect(() => {
    if (localStorage.getItem("userCred") !== null) {
      setState({
        loggedIn: true
      });
    }
  }, []);

  const logIn = useCallback(() => {
    setState({
      loggedIn: true
    });
  }, []);

  const logOut = useCallback(() => {
    localStorage.removeItem("userCred");
    setState({
      loggedIn: false
    })
  }, []);

  return (
    <BrowserRouter basename="/">

      <AuthContext.Provider value={{
        loggedIn: state.loggedIn,
        signIn: logIn,
        signOut: logOut
      }}>

        <div className="App">
          <Header />
          <Switch>

            <Route path="/WebGamesPortal" exact>
              <Homepage />
            </Route>

            <Route path="/WebGamesPortal/game" >
              <Gamepage />
            </Route>

            <Route path="/WebGamesPortal/category">
              <CategoryPage />
            </Route>

            <Redirect to="/WebGamesPortal"></Redirect>
          </Switch>
        </div>
      </AuthContext.Provider>
    </BrowserRouter>
  );
}

export default App;

Category.js page

import React, { useState, useEffect } from 'react';
import Container from '../../shared/Containers/Container';
import Dropdown from '../../shared/UIElements/Dropdown/Dropdown';
import GameCard from '../../shared/UIElements/GameCard/GameCard';
import Spinner from '../../shared/UIElements/Spinner/Spinner';
import { request_category, request_included_category_list } from '../../shared/Functions/Firebase';
import { receive_data_all, categoryListCallback } from '../../shared/Functions/FirebaseCallbacks';
import { withRouter } from 'react-router';

const CategoryPage = (props) => {

    const params = new URLSearchParams(props.location.search);
    let category = params.get("category");

    const [state, setState] = useState({
        gameList: [],
        searchKey: "",
        dataLoaded: false,
        newLoaded: true
    });

    const [categoryState, categoryFunction] = useState({
        categoryList: [],
    });

    useEffect(() => {
        loadStuff();
    }, []);

    const loadStuff = () => {
        request_included_category_list((snapshot) => {
            const array = categoryListCallback(snapshot);
            categoryFunction({
                categoryList: [...array]
            })
        })

        request_category(category, " ", 48, (snapshot) => {
            const array = receive_data_all(snapshot);
            setState(prevstate => {
                const newState = {
                    ...state,
                    gameList: [...prevstate.gameList, ...array],
                    dataLoaded: true
                }
                return newState;
            })
        })
    }

    //Here is where the new link gets pushed
    const changeHandler = (event) => {
        const value = event.target.value;
        props.history.push({
            pathname: "/WebGamesPortal/category",
            search: `&category=${value}`
        })
    }

    return (
        <>
            <Container>
                <div></div>

                <Dropdown change={changeHandler}>
                    <option value="" defaultValue="selected" disabled="disabled">Genre</option>
                    {categoryState.categoryList.map(item => {
                        return <option key={item} value={item}>{item}</option>
                    })}
                </Dropdown>
            </Container>

            <h1 style={{ color: "white", paddingLeft: "10%", marginTop: "40px", textTransform: "capitalize" }}>{category}</h1>

            <Container marginTop="15px">

                {
                    state.dataLoaded ? state.gameList.map(item => {
                        return <GameCard
                            key={item.gameId}
                            url={item.imageUrl}
                            gameUrl={item.url}
                            title={item.name}
                            id={item.gameId}
                            category={item.category}
                        ></GameCard>
                    }) : <Spinner />
                }
                {state.newLoaded ? null : <Spinner />}
            </Container>
        </>
    );
}

export default withRouter(CategoryPage);