reactjs – Como actualizar un conjunto de componentes por otro en React? sin Router

Lo que trato de hacer es que el componente mediante un boton se actualiza y cambio a otro y asi sucesivamente (pienso en crear 5 asi como la imagenes),pero no he podido ver algun ejemplo de como poder replicar,tengo por entendido que podria juntarlos en un componente padre(por ahora solo lo pongo en el index.js),yo normal podria juntarlos y crear cinco componentes padres(todavia no lo hago) pero como podria cambiar estos componentes padres con un boton siguiente y atras para que funcionione,he visto ejemplos con id como un contador,pero como seria los ajustes para este caso?

//Este el componente que compone los inputs y labels

function Valor(props) {
        return (
            <div className="form-group centm">
                <label htmlFor="ㅤ">{props.pregunta}</label>
                <input type="number" className={props.name} />
            </div>
        );
    }

export default Valor;

//Este el componente de los botones ,todavia no le puesto el onclick

function Boton(props) {
    return (
        <button className={'btn ' + props.btnclass}>{props.btname}</button>
    );
}

export default Boton;

Me podrian indicar algun metodo mejor,o que metodo deberia usar;si pudieran como un ejemplo minimo?

Conjunto 1

Conjunto2