React router history.push не добавляет путь от корня?

У меня есть поле ввода автозаполнения в моем реагирующем приложении, основанное на выборе пользователя, реагирующий маршрутизатор будет перенаправлять на страницу сведений о продукте.

Путь к странице сведений о моем продукте имеет следующую структуру:

<Route extact path = {'/:category/:id'} component = {ProductDetailContainer}/>

В моем автозаполнении у меня есть функция onChange, которая запускает перенаправление.

const handleChangeEvent(event, value) => {
   history.push(`${value.category}/${value.id}`) 
}

Хотя это работает, когда пользователь находится в базовом URL-пути '/', произойдет сбой, если пользователь попытается использовать поле автозаполнения в ProductDetailContainer из-за того, что путь был снова добавлен поверх текущего пути, тогда он станет таким путем, как этот '/:PrevCategory/:NewCategory/:id'

Я пытался использовать replace, но, похоже, он делает то же самое. Итак, есть ли способ сбросить историю до базового URL-адреса перед push()?

# Редактировать 1 Это где поле для автозаполнения и история являются толчком.

import React from 'react';
import { useHistory } from "react-router-dom"

import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import IconButton from '@material-ui/core/IconButton';
import Typography from '@material-ui/core/Typography';
import { fade, makeStyles } from '@material-ui/core/styles';
import MenuIcon from '@material-ui/icons/Menu';

import TextField from '@material-ui/core/TextField'
import CircularProgress from '@material-ui/core/CircularProgress'
import Autocomplete from '@material-ui/lab/Autocomplete'

const useStyles = makeStyles((theme) => ({
....
}));

const TitleBar = () => {
  const classes = useStyles();
  const history = useHistory();
  const [open, setOpen] = React.useState(false);
  const [options, setOptions] = React.useState([]);
  const loading = open && options.length === 0;

  React.useEffect(() => {
    let active = true;

    if (!loading) {
      return undefined
    }

    (async () => {
      const response = await fetch(site)

      const products = await response.json();
      
      if (active){
        setOptions(products)
      }

    })();

    return () => {
      active = false;
    };

  }, [loading])

  React.useEffect(() => {
    if (!open) {
      setOptions([]);
    }
  }, [open])

  const handleChangeEvent = (event, value) => {
    if (value !== null) {
      // redirect to product detail page if user selected an item
      history.replace(`${value.category}/${value.id}`)
    }
  }

  return (
    <div className = {classes.root}>
      <AppBar position = "static">
        <Toolbar>
          <IconButton
            edge = "start"
            className = {classes.menuButton}
            color = "inherit"
            aria-label = "open drawer"
          >
            <MenuIcon />
          </IconButton>

          <div className = {classes.search}>

            <Autocomplete
              id='aysncSearchBar'
              style = {{ width : 300}}
              open = {open}
              onOpen = {()=>{setOpen(true)}}
              onClose = {()=>{setOpen(false)}}
              getOptionSelected = {(option, value) => option.id = value.id}
              getOptionLabel = {(option) => option.title}
              options = {options.sort((a,b) => -b.category.localeCompare(a.category))}
              groupBy = {(option) => option.category}
              loading = {loading}
              onChange = {handleChangeEvent}
              renderInput = {(params) => (
                <TextField 
                  {...params}
                  label = "Search"  
                  variant = "outlined"
                  InputProps = {{
                    ...params.InputProps,
                    endAdornment: (
                      <React.Fragment>
                        {loading ? <CircularProgress color = "inherit" size = {20} /> : null}
                        {params.InputProps.endAdornment}
                      </React.Fragment>
                    ),
                  }}
                />
              )}

            />
          </div>

        </Toolbar>
      </AppBar>
    </div>
  );
}

export default TitleBar;