Как обновить формы (input-field) в реакт?

Question

[Руслан]

У меня есть функция addpressHandler

const addpressHandler =  event => {

      questions.push(
          new Question(
              question.question_text,
              [
                  {answerText: answer1.answer_text, isCorrect:  answer1.isCorrect},
                  {answerText: answer2.answer_text, isCorrect:  answer2.isCorrect},
                  {answerText: answer3.answer_text, isCorrect:  answer3.isCorrect},
                  {answerText: answer4.answer_text, isCorrect:  answer4.isCorrect},

              ]
          )
      )
}

понимаю жутко кривое, но такая есть.
А нужна она для того чтобы забрать данные из 5 форм, 1-ая вопрос, и остальные
4 это ответы на вопрос, так вот мне нужно чтобы при нажатии на кнопку, все эти формы сначала сделали questions.push() как в функции, а за тем все сбросились, чтобы можно было еще добавить.

Вот тут код форм

return (
        <div className="row">
            {!named ? (
                <>
                <div className="col s8 offset-s2" style={{paddingTop: '2rem'}}>
                    <label htmlFor="quiz_name">Назовите ваш опрос</label>
                    <div className="input-field">
                        <input
                            placeholder="quiz_name"
                            id="quiz_name"
                            type="text"
                            value={quiz.quiz_name}
                            onChange={e => setQuiz({quiz_name:e.target.value})}
                        />
                    </div>
                    <div className="col s8 offset-s2" >
                    <button className="btn waves-effect waves-light"
                            type="submit"
                            name="action"
                            onClick={namedHandler}
                    >Next
                    </button>
                    </div>
                </div>

                </>

            ) : (
                <>
                        <label htmlFor="question">Вопрос #{quiestion_id.toFixed()}</label>
                        <div className="input-field">
                            <input
                                placeholder="Вопрос"
                                id="question_name"
                                type="text"
                                value={question.question_text}
                                onChange={e => setQuestion({question_text:e.target.value})}
                            />

                        </div>
                        <div className="input-field">
                            <input
                                placeholder="Ответ 1"
                                id="answer1"
                                type="text"
                                value={answer1.answer_text}
                                onChange={e => setAnswer1({answer_text:e.target.value, ...answer1})}
                            />
                        </div>

                        <div className="input-field">
                            <input
                                placeholder="Ответ 2"
                                id="answer2"
                                type="text"
                                value={answer2.answer_text}
                                onChange={e => setAnswer2({answer_text:e.target.value,...answer2})}
                            />
                        </div>
                        <div className="input-field">
                            <input
                                placeholder="Ответ 3"
                                id="answer3"
                                type="text"
                                value={answer3.answer_text}
                                onChange={e => setAnswer3({answer_text:e.target.value, ...answer3})}
                            />
                        </div>
                        <div className="input-field">
                            <input
                                placeholder="Ответ 4"
                                id="answer4"
                                type="text"
                                value={answer4.answer_text}
                                onChange={e => setAnswer4({answer_text:e.target.value,...answer4})}
                            />
                        </div>

                    <label>Верный ответ</label>
                    <select className="browser-default" name="isCorrect" onChange={correctHandler}>
                        <option value="" disabled selected>Выберите верный ответ</option>
                        <option value="1">{answer1.answer_text}</option>
                        <option value="2">{answer2.answer_text}</option>
                        <option value="3">{answer3.answer_text}</option>
                        <option value="4">{answer4.answer_text}</option>
                    </select>

                        <div className="col s8 offset-s2" >
                            <button className="btn waves-effect waves-light"
                                    type="button"
                                    name="action"
                                    onClick={addpressHandler}
                            >Еще один вопрос
                                <i className="material-icons right">add</i>
                            </button>

                            <button className="btn waves-effect waves-light"style={{marginTop: '1rem'}}
                                    type="submit"
                                    name="action"
                                    onClick={pressHandler}
                            >Хватит, создать
                                <i className="material-icons right">create</i>
                            </button>

                        </div>
                </>

                )}

        </div>
    )

p.s я до этого ничего подобного не делал в js, да и вообще нигде, прошу помогите разобраться