He intentado usar el método del mapa como lo he visto en mi investigación sobre cómo hacer esto, pero parece que no es el método para usar cuando tengo una estructura como la siguiente:

 const stepLabels = [ { labels1: ['First One'] }, { labels2: ['Second One', 'second One'] }, { labels3: ['Third One', 'Third One', 'Third One'] } ];

Y estoy usando Material UI Stepper para intentar representar las etiquetas de paso a continuación

 <Stepper alternativeLabel activeStep={2} connector={<StepConnector active completed classes={{ line: classes.connector, active: classes.activeConnector, completed: classes.activeConnector }} />} className={classes.stepper}> {steps.map(label => ( <Step key={label}> <StepLabel classes={{ root: classes.stepLabelRoot }}> <span> { stepLabels.map(item => item.labels)} </span> </StepLabel> </Step> ))} </Stepper>

Intentando obtener esto, debajo de cada nodo, mostrará la etiqueta. Entonces, debajo del primer nodo, dirá:

Debajo del primer nodo se mostrará

 First One

Second One se mostrará dos veces debajo del segundo nodo

 Second One Second One

Third One se mostrará tres veces en el tercer nodo

 Third One Third One Third One

He estado tratando de resolver este problema durante una hora, pero parece que no puedo encontrar la respuesta.

Es realmente confuso hacer esto porque sé cómo usar el método del mapa, pero esta estructura es un poco confusa. He hecho prueba y error y obtengo diferentes errores cada vez. Como que algo no está definido, etc.