How do I recursively wrap a `JSX.Element` with an `Array<FlowComponent>`

// Let's say we have these values:
const children = props.children
const layouts = [Layout1, Layout2, Layout3];


// How do I turn it into:
return (
  <Layout1>
    <Layout2>
      <Layout3>
        {props.children}
      </Layout3>
    </Layout2>
  </Layout>
);

// Let's say we have these values:
const children = props.children
const layouts = [Layout1, Layout2, Layout3];


// How do I turn it into:
return (
  <Layout1>
    <Layout2>
      <Layout3>
        {props.children}
      </Layout3>
    </Layout2>
  </Layout>
);