[react]history.push changes url, but not rendering page - reactjs

Question

history.push in SearchInput.js changes url, but it does not re-render the page :(
I read some posts handling this issue, but all does not work.
SearchInput.js component is called at header.
app.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import AppContext from '../contexts/AppContext';
import Login from './Login';
import Main from './Main';
import { createBrowserHistory } from "history";
const history = createBrowserHistory();
const App = () => {
return (
<AppContext.Provider value={{}}>
<Router history={history}>
<Switch>
<Route path="/" component={Login} exact/>
<Route path="/contents" component={Main}/>
</Switch>
</Router>
</AppContext.Provider>
)
};
export default App;
main.js
import React, { useState, useEffect } from 'react';
import { Route } from 'react-router-dom';
import _ from "lodash";
import Header from './Share/Header';
import Footer from './Share/Footer';
import Alert from './Share/Alert';
import AlertContext from '../contexts/AlertContext';
import ShareDataContext from '../contexts/ShareDataContext';
import Search from './Search/Search';
import Targeting from './Targeting/Targeting';
import ModelHit from './ModelHit/ModelHit';
import {KEY_NAME} from '../consts/keyName';
const Main = (props) => {
const [alertState, setAlertState] = useState({
eventType: '',
eventMessage: '',
eventCount: 0,
});
return (
<AlertContext.Provider value={{ alertState, setAlertState }}>
<Header quarterRawData={quarterRawData}/>
<Alert />
<main className="blue-grey lighten-5">
<Route path="/contents/search" component={Search} exact />
<Route path="/contents/targeting" component={Targeting} exact />
<Route path="/contents/model-hit-list" component={ModelHit} exact />
</main>
<Footer />
</AlertContext.Provider>
);
};
export default Main;
SearchInput.js -> where call history.push
/* eslint-disable no-use-before-define */
import React from 'react';
import TextField from '#material-ui/core/TextField';
import Autocomplete from '#material-ui/lab/Autocomplete';
import {KEY_NAME} from '../../consts/keyName'
import { useHistory } from 'react-router-dom';
const SearchInput = (props) => {
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const {options} = props;
const history = useHistory();
const searchHandler = (e, value) => {
if (value) {
history.push({
pathname: '/contents/search',
state: {
[KEY_NAME.SHARE_CODE]: value[KEY_NAME.SHARE_CODE],
},
})
}
}
return (
<Autocomplete
id="combo-box-demo"
options={options}
getOptionLabel={(option) => option['target']}
style={{ width: 400 }}
onChange={searchHandler}
renderInput={(params) => <TextField {...params} label="Search" variant="outlined"/>}
/>
);
}
export default SearchInput;