title: React Hook "useTranslation" is called in function "getMyMenu" that is neither a React function component nor a custom React Hook function
body: <p>I am invoking the <code>useTranslation</code> hook from within a normal function as below</p>
  <pre><code>import { useTranslation } from &quot;react-i18next&quot;;
  
  
  function getMyMenu(a) {
    const { t } = useTranslation('translations');
    
    if (a.showRoute) {
        a.label = t(a.label);
      return a;
    }
  }
  
  
  
  export const MyNav = props =&gt; {
    let tabs = recurseFn(getMyMenu, props.routes);
  }
  </code></pre>
  <p>I get the following error. Is there no way to fix this? For some strange reason, I was able to see the similar code pattern working in other project. Any additional config needed to make this work?</p>
  <p>Updated:</p>
  <p>This is how my <code>recurseFn</code> looks like:</p>
  <pre><code>export const recurseFn = (chk, [head, ...tail]) =&gt; {
    if (head === undefined) return [];
    if (chk(head)) {
      return [head, ...recurseFn(chk, tail)];
    }
  
    return [...recurseFn(chk, tail)];
  };
  </code></pre>