In the file "Layout", <Aux> still complaining with Typescript: This JSX tag's 'children' prop expects a single child of type 'Element', but multiple children were provided.

aux-statelesscomponent.js

// AUX FILE
import React from "react";

interface AuxProps {
  children: React.ReactNode;
}

const aux = (props: AuxProps) => <>{props.children}</>;

export default aux;

-------------------------

// LAYOUT FILE
import React from "react";
import Aux from "../../hoc/auxiliar";

interface LayoutProps {
  children: React.ReactNode;
}

const layout = (props: LayoutProps) => (
  <Aux>
    <div>Toolbar, SideDrawer, Backdrop</div>

    <main>{props.children}</main>
  </Aux>
);

export default layout;

In the file "Layout", still complaining with Typescript: This JSX tag's 'children' prop expects a single child of type 'Element', but multiple children were provided.

And is true, wrap a JSX element and a children element. But I do not know how put the correct type for him. Any hint?

Needed use Fragment, since for the moment, this is unfortunately a limitation of the compiler