Reactjs - rendering nested components?

Question

React

Good afternoon. There is an array:

components = [
    {
        name: 'component1',
        width: 100,
        height: 100,
        child: [
            {
                name: 'component11',
                width: 100,
                height: 100,
            }
        ]
    },{
        name: 'component2',
        width: 100,
        height: 100,
        child: [
            {
                name: 'component21',
                width: 100,
                height: 100,
            }
        ]
    },{
        name: 'component3',
        width: 100,
        height: 100,
        child: [
            {
                name: 'component31',
                width: 100,
                height: 100,
            }
        ]
    }
];

According to the idea, there is no restriction on nesting. I want it to be rendered taking into account nesting in the array, like
-component1 --component11 -component2
--component21 -component3 --component31 I can’t figure out how to implement this in react. If globally, I just need some kind of structure that describes the nesting of components and some properties, after which I take this structure and send it to react for rendering. Any idea how to implement this?