title: Filter in react query not working properly on first attempt
body: <p>I am trying to get only females from an array using a filter, but on the first attempt react query returns the whole array, after that it is working fine. Any idea what property I have to add or remove, so this side effect disappears.
  Here is my code:</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  import { useQuery } from &quot;react-query&quot;;
  import getPersonsInfo from &quot;../api/personCalls&quot;;
  
  export default function Persons() {
    const [persons, setPersons] = useState([]);
    const { data: personData, status } = useQuery(&quot;personsData&quot;, getPersonsInfo, {
      onSuccess: (data) =&gt; {
        setPersons(data.data);
      },
      onError: (error) =&gt; {
        console.log(error);
      }
    });
  
    const getFemaleOnlyHandler = () =&gt; {
      const result = personData.data.filter(
        (person) =&gt; person.gender === &quot;female&quot;
      );
      setPersons(result);
    };
  
    return (
      &lt;&gt;
        &lt;button onClick={getFemaleOnlyHandler}&gt;Female only&lt;/button&gt;
        {status === &quot;loading&quot; ? (
          &lt;div&gt;Loading ... &lt;/div&gt;
        ) : (
          &lt;div&gt;
            {persons.map((person) =&gt; (
              &lt;div&gt;
                &lt;p&gt;{person.name}&lt;/p&gt;
                &lt;p&gt;{person.lastName}&lt;/p&gt;
                &lt;p&gt;{person.address}&lt;/p&gt;
                &lt;p&gt;{person.gender}&lt;/p&gt;
                &lt;p&gt;{person.country}&lt;/p&gt;
                &lt;p&gt;{person.city}&lt;/p&gt;
              &lt;/div&gt;
            ))}
          &lt;/div&gt;
        )}
      &lt;/&gt;
    );
  }
  </code></pre>
  <p>I added the full code in code sandbox: <a href="https://codesandbox.io/s/relaxed-drake-4juxg" rel="nofollow noreferrer">https://codesandbox.io/s/relaxed-drake-4juxg</a></p>