I am trying to create a declaration file for the next component. It was written with JS ES6.

function Column({ className, layout }) {
    function renderLayout() {
        return layout.map((item, index) => {
            const Component = item?.component || item;

            return (
                <Component
                    {...item?.options}
                    // eslint-disable-next-line react/no-array-index-key
                    key={index}
                />
            );
        });
    }

    return (
        <div className={className} >
            {renderLayout()}
        </div>
    );
}

Example of declaration:

<Column
    className='test'
    layout={[
        {
            component: Input, // It can use options
            options: {  // It can have a custom shape. How to define types for options?
                first: 'test' 
            }
        },
        {
            component: Date, // It can use options
            options: { // It can have a custom shape. How to define types for options?
                second: 'test', 
                newValue: { index: 3 } 
            }
        }
    ]}
/>
<Column
    className='test'
    layout={[Input, Date]}
/>

I have a problem with options property. I do not know how to define types for the object as it can have different types depending on the component the user pass with.

Input, Date - are examples of components, it can be replaced with any other components.

My declaration file.

interface ILayout {
    component?: React.ElementType;
    options?: any; // <---- Here is a problem. How to replace any with defined types.
}

interface ColumnProps {
    className?: string;
    layout?: (ILayout|React.ElementType)[];
}

export class Column extends React.Component<ColumnProps> {}