Como construir um JSON dinâmico ReactJs

Programação
, , , ,
#1

Olá galera.

Preciso criar um JSON dessa maneira:

"aula": [
  "questao": "Lorem Ipsum is simply dummy text",
  "respostas": [
      {"id": 1,"pergunta": "texto1."},
    ],
  ]

É algo parecido com isso: https://codesandbox.io/s/pjz1w25n8x?file=/src/App.vue:45-228

porém eu preciso fazer com que, cada vez que o usuário clicar no botão “adicionar nova resposta” ele deve gerar um novo json dentro desse array, e assim com a questão também.
Exemplo: Click no botão “adicionar nova questão” ele tem que criar um novo campo para questão e a mesma coisa para a resposta.
O JSON ficaria assim quando adiciona uma nova resposta:

"aula": [
  "questao": "Lorem Ipsum is simply dummy text",
  "respostas": [
      {"id": 1,"pergunta": "texto1."},
      {"id": 1,"pergunta": "texto1."},
    ],
  ]

JSON adicionando nova questão.

"aula": [
      "questao": "Lorem Ipsum is simply dummy text",
      "respostas": [
          {"id": 1,"pergunta": "texto1."},
          {"id": 1,"pergunta": "texto1."},
        ],
   "questao": "Lorem Ipsum is simply dummy text",
      "respostas": [
        ],
      ]

Imagem ilustrando:
image

Meu código está assim, não sei como fazer (socorro):

  <div className="questions_bo_container">
                <button>Adicionar nova questão</button>
                <input label="Questão 1" variant="outlined" />
                <br />
                <div className="questions_bo_alternative">
                  <input label="Alternativa" variant="outlined" />
                  <button>Adicionar nova resposta</button>
                </div>
              </div>

Desde já eu fico muito agradecida :heart::heart:

#2

oi, td bom? Ve se isso te ajuda