title: TypeScript: "filter" and "find" are not returning the expected result
body: <p>I have the following lines of code inside the <code>useEffect</code> hook which doesn't return the result I expect:</p>
  <pre><code>useEffect(() =&gt; {
  
  console.log('===========================');
  console.log('chatState.customers');
  console.log(chatState.customers);
  console.log(chatState.customers?.length);
  
  if (chatState !== undefined &amp;&amp; chatState.customers &amp;&amp; chatState.customers.length &gt; 0) {
    const name = 'Yoges Gamuda';
  
    const result = chatState.customers.filter((obj) =&gt; {
      return obj.name === name;
    });
  
    console.log(`result for name ${name} is: `);
    console.log(result);
  
    const p = chatState.customers.find((x) =&gt; x.name === name);
  
    if (p !== undefined) {
      console.log(`p &gt;&gt; id: ${p.id} name: ${p?.name}`);
    } else {
      console.log('p is undefined!');
    }
  
    console.log('===========================');
  }
  }, [chatState]);
  </code></pre>
  <p>Result:</p>
  <p><a href="https://i.stack.imgur.com/J9aIT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/J9aIT.png" alt="enter image description here" /></a></p>
  <p>I note from the above that:</p>
  <ul>
  <li><code>chatState.customers</code> does contain data</li>
  <li><code>chatState.customers</code> is of type <code>array</code> with length <code>39</code></li>
  <li>the key I'm looking for (&quot;<code>Yoges Gamuda</code>&quot;) does exist in <code>chatState.customers</code></li>
  </ul>
  <p><strong>Background details:</strong></p>
  <ul>
  <li><p><code>chatState</code> comes from the <code>Context</code>:</p>
  <pre><code>const { state: chatState } = chatContext;
  </code></pre>
  </li>
  <li><p>which is defined as below:</p>
  </li>
  </ul>
  <p><a href="https://i.stack.imgur.com/zR96Z.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zR96Z.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/nm6pe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nm6pe.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/AsYfc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AsYfc.png" alt="enter image description here" /></a></p>
  <p>What am I doing incorrectly? I've been at it for a day now and I still am not able to figure it out.</p>
  <p><strong>Edited to add</strong></p>
  <p>I tried to print the values of <code>chatState.customers</code> and following is the result:</p>
  <pre><code>chatState.customers.forEach((x) =&gt; console.log(x));
  </code></pre>
  <p><a href="https://i.stack.imgur.com/9j0fl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9j0fl.png" alt="enter image description here" /></a></p>