Aquí está la interfaz de usuario de una aplicación React en la que estoy trabajando:

Actualmente, la interfaz de usuario se realiza como un único diseño gigante.

Quiero dividir cada paso para que sea su componente separado. Como puede ver, cada componente tendría un diseño algo diferente. Ahora quiero hacer que obtengamos la numeración "Paso 1:", "Paso 2:" algorítmicamente (actualmente esas son cadenas codificadas).

Estaba pensando en usar componentes de alto orden para este propósito, pero no estaba seguro de si necesitaría que compartiesen contexto o algo para obtener la numeración correcta.

¿Alguna idea de cómo se podría lograr tal cosa?

Nuevamente, proporcionaré el diseño como un componente separado, el título del paso como una cadena, pero la parte Step #: debe agregarse durante el renderizado.