We are creating a base library for administration panel (something similar to react-admin).

However, in react world, objects can be of a lot of types. There is no single consistency.

Let's say you have a component called Action, and your library user should provide a list of it for you.

These are possible things that you might get:

// a single item, as a JSX variable
const Actions = <Action />

// an array of items, as a JSX variable
const Actions = <>
   <Action />
   <Action />
</>

// an arrow function, but returning a single JSX result
const Actions = (params) => <Action />

// an arrow function, but returning an array of JSX results
const Actions = (params) => <>
    <Action />
    <Action />
</>

// an arrow function, having body, returning a single JSX result
const Actions = (params) => {
    return <Action />
}

// an arrow function, having body, returning an array of JSX results
const Actions = (params) => {
    return <>
         <Action />
         <Action />
    </>
}

// or they might give lowercase variables, etc.

And there might be other possible ways that I don't know.

This makes wring code very frustrating and difficult. Because for simple JSX variable you should use interpolation syntax ({actions}), for function components you should render using <Actions />, etc.

Is there a function in react which we can use to wrap all of these types in an empty fragment and unify them?