Can't redirect to search result page

Question

I'm not good at English, so it might be hard to explain my intention.

I'm using React, React router, Apollo client, In production build, When I click the search button, I can't redirect to render a result component because of error with error message error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

First, I tried without useEffect. It occur error as described above.

Second, I tried with useEffect hook, that change redirect state to false. and it changes url. but doesn't render result component. useEffect(() => {setRedirect(false)}, [redirect])

Finally I tried to make another react app to test this situation without apollo, and some custom components that are for clean code in the production build. I tried in development build. And it perfectly works without error

// search-bar.js
function SearchBar(props) {
  // keywords for searching books
  const [keywords, setKeywords] = useState('');
  // search option
  const [option, setOption] = useState('All');
  // determine to redirect or not
  const [redirect, setRedirect] = useState(false);

  return (
    <>
      <div className="nav-search">
        <form
          role="search"
          onSubmit={ e => {
            e.preventDefault();
            setRedirect(true);
          }}
          className="form-search"
        >

          <NotRequiredInput
            type="search"
            label="Search keywords: "
            id="keywords"
            value={keywords}
            onChange={e => {
              setKeywords(e.target.value);
            }}
          />

          // it map the list's items to option
          <SelectBoxWithoutNone
            label="Search option: "
            id="search-option"
            value={option}
            onChange={e => {
              setOption(e.target.value);
            }}
            list={['All', 'Title', 'Author']}
          />

          <SubmitButton label="Search" />
        </form>
      </div>
      { redirect && <Redirect to={`/search?o=${option}&k=${keywords}`} /> }
    </>
  );
}

// app.js
<Query>
  {({loading, data}) => {
    if (loading)
    return (
      <Header>
      <NavBar>
      <main>
        <Suspense>
          <Switch>
            <Route exact path="/" component={HomePage} />
            <Route path="/search" render={props => <SearchResult {...props}/>}
    )
  }}
  // app.js looks like this with many route component.
  // also using React.lazy for code splitting

// search-result.js
function SearchResult (props) {
  const parsed = queryString.parse(props.location.search);
  const option = parsed.o;
  const keywords = parsed.k;

  return (
    <div className="div-search-result">
      <p>{option}</p>
      <p>{keywords}</p>
    </div>
  );
}

I expected that it renders result component (with or without hooks) but as I described above, It occurred error

Update: When I tried to type some query parameter on url path directly, it works.