How can i render a component by a for loop?

i have an array of components, so i want to print the content, my attempt is like this:

 const fields = [<Invites />]

    return (
        <Card
            style={{ width: 600 }}
        >
            
                {fields.map((Item, index) => <Item />)}

i got this error:

react-dom.development.js:28439 Uncaught Error: Element type is
invalid: expected a string (for built-in components) or a
class/function (for composite components) but got: object.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

btw this is the Invites component:

const Invites = () => {
    return (<Form.Item className='form-item item-container' label="Invites">
        <span >
            <Input  />
        </span>

    </Form.Item>)
}

>Solution :

You just need to change your code to this:
{fields.map((item, index) => item)}