title: location.search does not update correctly - React - ReactRouterDomV5
body: <p>In My App Functional Component I Define a Function That Should be Call Once The User Clicked On The Search Button In My <code>MainHeader</code> Functional Component.</p>
  <pre><code>
  function App(props) {
      const location = useLocation();
      const [movies, setMovies] = useState(DUMMY_MOVIES);
      
      const filterMovies = () =&gt; {
          console.log(location.search);
      }
      
      return (
          &lt;MainHeader onFilterMovies={filterMovies}&gt;
              &lt;Switch&gt;
                  &lt;Route path=&quot;/&quot; exact&gt;
                      &lt;Redirect to=&quot;/movies&quot; /&gt;
                  &lt;/Route&gt;
                  &lt;Route path=&quot;/movies&quot; exact&gt;
                      &lt;Movies movies={movies} /&gt;
                  &lt;/Route&gt;
                  &lt;Route path=&quot;/movies/:movieId&quot;&gt;
                      &lt;MovieDetails /&gt;
                  &lt;/Route&gt;
              &lt;/Switch&gt;
          &lt;/MainHeader&gt;
      );
  }
  </code></pre>
  <p>In The <code>MainHeader</code> Component There Is A Submit Handler That Will Execute Once The User Click the Search Button, And In There(SubmitHandler) I Append <code>searchTerm</code> As A Key And <code>searchTermValue</code> As The Value Of The Query Parameter And Replace The Page With <code>location.replace(`/movies?searchTerm=${searchTermValue}`)</code>.
  And Finally I Call The OnFitlerMovies Whitch I Receive From <code>props</code> To Inform The <code>App</code> Component That We're DONE!</p>
  <p>In <code>App</code> Functional Component Where I Define The <code>FiltrerMovies</code> Function, I Simply Log The Query Parameter Value To The Console.</p>
  <p>But The Value Witch I Receive Is The Previous Value Of The Query Parameter.
  I Mean When I Enter <code>something</code> In The Search Input And Then Click The Search Button I Receive It In <code>FilterMovies</code> Method As An Empty String, But The Next Time, Even If I Dont Enter Anything(I Mean A Empty String), The Correct Value For The Previous Time Get Logged!</p>
  <pre><code>const MainHeader = (props) =&gt; {
      const history = useHistory();
      const searchTermInputRef = useRef();
      
      const submitHandler = (e) =&gt; {
          e.preventDefault();
          
          const searchTermValue = searchTermInputRef.current.value.trim();
          
          history.replace(`/movies?searchTerm=${searchTermValue}`);
          
          props.onFilterMovies();
      };
  ...
  </code></pre>
  <p>My Guess Is That We Can't Use ReactRouterDomV5 Hooks Inside of A Component Witch Is Not In <code>Route</code> Component.</p>
  <p>Now How Can I Solve This Problem?</p>