title: React i18next useTranslation Hook in helper method
body: <p>I'm using React with react-i18next</p>
  
  <p>My index.tsx File contains some components and I can use the Translation function there</p>
  
  <strong><code>index.js</code></strong>
  
  <pre class="lang-js prettyprint-override"><code>import React, { Suspense } from 'react'
  import ReactDOM from 'react-dom';
  import * as utils from './Utils';
  import './i18n';
  import { useTranslation, withTranslation, Trans } from 'react-i18next';
  
  ...
    const { t, i18n } = useTranslation();
    //I can use the translate function here
    t("title");
    //call a util function
    utils.helperFunction(...);
  ...
  </code></pre>
  
  <p>Everything works fine here.
  I now created some helper functions in an additional file</p>
  
  <strong><code>Utils.tsx</code></strong>
  
  <pre class="lang-js prettyprint-override"><code>...
  import { useTranslation, withTranslation, Trans } from 'react-i18next';
  ...
  export function helperFunction(props: any){
     //do stuff
  
     //now I need some translation here - but useTranslation is not working?
     const { t, i18n } = useTranslation();
     t("needTranslation");
  }
  </code></pre>
  
  <p>How can I use the same translation logic inside my helper function? (without always passing the <code>t</code> function to the helper-method)</p>
  
  <p>Or is the usage of the hook the wrong approach here?</p>
  
  <p>The following error occurs</p>
  
  <pre><code>React Hook "useTranslation" is called in function "helperFunction" which is neither a React function component or a custom React Hook function  react-hooks/rules-of-hooks
  </code></pre>