How can the steps components in react be written dynamically?

< Steps progressDot current= {1} >

<Step title="Finished" description="This is a description." />
<Step title="In Progress" description="This is a description." />
<Step title="Waiting" description="This is a description." />

< / Steps >,
how many step are dynamically displayed based on the data transmitted in the background


assume that list is the data sent from the background

    const list = [
    { id: 1, name: '' }, 
    { id: 2, name: '' }, 
    { id: 3, name: '' },
    ]
<Steps progressDot current={1}>
    {
        list.map((item) => {
            return (
                <Step key={item.id} title={item.name} description={item.name} />
            )
        })
    }
</Steps>

it's simple

Menu