title: Filter functions results to undefined (useSelector)
body: <p>So I have this line of code:</p>
  <pre><code>const { semesters, isLoading } = useSelector((state) =&gt; state.semester);
  </code></pre>
  <p>The <code>semesters</code> object looks like this.</p>
  <pre><code>[
    {
      &quot;isActive&quot;: true,
      &quot;_id&quot;: &quot;617aa8a3f2a712242c272d96&quot;,
      &quot;acadYear&quot;: &quot;A.Y. 2021- 2022, 2nd term&quot;,
      &quot;__v&quot;: 0
    },
    {
      &quot;isActive&quot;: false,
      &quot;_id&quot;: &quot;617aa91aa8f2aa2bc86422e9&quot;,
      &quot;acadYear&quot;: &quot;A.Y. 2025-2026, qweqwe&quot;,
      &quot;__v&quot;: 0
    }
  ]
  </code></pre>
  <p>And I'm trying to perform filter/find function in that array with this code.</p>
  <pre><code>const filtered = semesters.filter(sem =&gt; sem.isActive !== false)[0].acadYear;
  </code></pre>
  <p>or</p>
  <pre><code>const getFind = semesters.find(sem =&gt; sem.isActive !== false).acadYear;
  </code></pre>
  <p>Neither works for me and the error I'm getting is that both of the function is undefined. I've tried removing it and got no error. However, when I try to undo it and once it has already been loaded, then it will work. The problem is that when I go back to the page, the error will happen again. Anyone can help me? Thanks in advance.</p>