title: While I want to Display Error message, other component pops up error in React
body: <p>I make something like that, When I fetch data, I pull stackoverflow users, when the stackoverflow user doesn't exist, I want to display Error Page by using <code>useState()</code></p>
  <p>In my Fetching API, function I have written that</p>
  <pre class="lang-js prettyprint-override"><code>const [isError, setIsError] = useState&lt;boolean&gt;(false)
  const [data, setData] = useState&lt;any&gt;([])
  
  const fetchUser = async () =&gt; {
    await axios.get(&quot;URL&quot;)
    .then(userData =&gt; {
      if (userStats.data.items.length === 0) {
            setIsError(true)
            console.log(&quot;User Doesn't Exist&quot;)
         }
      else {setData(userStats.data.items[0])}
      //Up there I decalre my useState with that fetched API
    })
  }
  </code></pre>
  <p>When I input in input field some random letter which user really doesn't exist I check my <code>useState</code> boolean
  <em>If it is true I want to return my <code>ErrorPage</code> component if it's false <code>Success</code> Prop Componenet</em></p>
  <pre class="lang-js prettyprint-override"><code>if(isError){
    return &lt;ErrorPage /&gt;
  }
  
  return &lt;Success username={data.userName}/&gt;
  </code></pre>
  <p>I get in console log -&gt; <code>&quot;User Doesn't Exist&quot;</code> and also React error</p>
  <blockquote>
  <p><strong>Cannot read properties of undefined (reading 'userName')</strong></p>
  </blockquote>
  <p>I know <code>userName</code> doesn't exist in data but when <code>isError</code> is true why my if statement doesn't ignore last return?</p>
  <p><em><strong>code up there what is shown is the logic what I do</strong></em></p>
  <p>if something else missing comment me down and I will edit it</p>