title: children.toArray() - TS2339: Property 'key' does not exist on type 'ReactChild | ReactFragment | ReactPortal'... - React Typescript
body: <p>I'm creating a TypeScript component/wrapper that adds a divider between each child:</p>
  <pre class="lang-js prettyprint-override"><code>import React, { FC, Children } from 'react'
  
  const DividedChildren: FC = ({ children }) =&gt; {
    return (
      &lt;div&gt;
        {Children.toArray(children).map((node, index) =&gt; {
          if (index === 0) return node
          return (
            &lt;Fragment key={node.key}&gt; // TS Error, but code works fine
              &lt;div className=&quot;divider&quot; /&gt;
              {node}
            &lt;/Fragment&gt;
          )
        })}
      &lt;/div&gt;
    )
  </code></pre>
  <p>However, I'm getting a TypeScript error when I try to move the child's <code>key</code> into his new container:<br />
  <code>TS2339: Property 'key' does not exist on type 'ReactChild | ReactFragment | ReactPortal'.   Property 'key' does not exist on type 'string'.</code></p>
  <h4>How can I type-safely move each item's key to its new container?</h4>