title: Error in <Trans /> component with react-i18next: Nothing returned from render
body: <p>When I try to interpolate some React components with the <code>react-i18next</code> <code>Trans</code> component I get the following error:</p>
  <pre><code>Uncaught Error: Trans(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
  </code></pre>
  <p>I am calling the <code>Trans</code> component like so:</p>
  <pre><code>                &lt;Trans
                    t={l as TFunction}
                    defaults=&quot;hello &lt;chip&gt;{{cohortName}}&lt;/chip&gt; &lt;bold&gt;{{jobName}}&lt;/bold&gt;&quot;
                    values={{
                      cohortName,
                      jobName,
                    }}
                    components={{
                      chip: (
                        &lt;Chip&gt;
                          &lt;&gt;&lt;/&gt;
                        &lt;/Chip&gt;
                      ),
                      bold: &lt;strong /&gt;,
                    }}
                  /&gt;
  </code></pre>
  <p>I cannot see why this is a problem as according to the <a href="https://react.i18next.com/latest/trans-component#alternative-usage-which-lists-the-components-v11.6.0" rel="nofollow noreferrer">docs</a> this should be ok.</p>
  <p>I do not think the issue is with <code>react-i18next</code> Trans component but am not sure.  Any ideas?</p>
  <p>I have tried an alternative version where I use a template as the return value from the <code>Trans</code> component:</p>
  <pre><code>               &lt;Trans
                    t={t}
                    defaults=&quot;hello &lt;1&gt;{{cohortName}}&lt;/1&gt; &lt;2&gt;{{jobName}}&lt;/2&gt;&quot;
                    values={{
                      cohortName,
                      jobName,
                    }}
                  &gt;
                    Hello &lt;Chip&gt;{{ cohortName }}&lt;/Chip&gt;{&quot; &quot;}
                    &lt;strong&gt;{{ jobName }}&lt;/strong&gt;
                  &lt;/Trans&gt;
  </code></pre>
  <p>This throws:</p>
  <p><code>Error: Objects are not valid as a React child (found: object with keys {cohortName}). If you meant to render a collection of children, use an array instead.</code></p>
  <p>Which lead me to tray using an alternate prefix and sufix like so:</p>
  <pre><code>                &lt;Trans
                    t={t}
                    defaults=&quot;hello &lt;1&gt;%%cohortName%%&lt;/1&gt; &lt;2&gt;%%jobName%%&lt;/2&gt;&quot;
                    tOptions={{
                      interpolation: {
                        prefix: &quot;%%&quot;,
                        sufix: &quot;%%&quot;,
                      },
                    }}
                    values={{
                      cohortName,
                      jobName,
                    }}
                  &gt;
                    Hello &lt;Chip&gt;%%cohortName%%&lt;/Chip&gt;{&quot; &quot;}
                    &lt;strong&gt;%%jobName%%&lt;/strong&gt;
                  &lt;/Trans&gt;
  </code></pre>
  <p>No errors thrown but the values <code>cohortName</code> &amp; <code>jobName</code> are rendered as plain text and not the value from the component that <code>&lt;Trans /&gt;</code> is a child of.</p>