Состояние реакции продолжает сбрасываться при отправке формы. Как сохранить состояние?

Я пытаюсь научиться React и борюсь с этим всю ночь. Следующий код предназначен для перебора моего массива вопросов и динамического обновления моего рендеринга, чтобы заменить сообщение, тип и имя каждого из моих элементов формы. Однако то, что продолжает происходить, и чего я не могу найти, так это то, что при каждой отправке страница обновляется за долю секунды до следующего объекта в массиве вопросов, но затем обновляется, и форма сбрасывается на страницу: состояние 0 с вопросом "сколько команд?" (вместо увеличения до вопроса «сколько раундов?», как предполагалось). Я попытался переместить состояние к родительскому элементу формы, но это закончилось тем, что я просто пнул консервную банку, и возникла та же проблема.

import React from 'react';
import ReactDOM from 'react-dom';

export class Form extends React.Component {
constructor(props) {
    super(props);

    this.state = {
        questions : [
            {   message: 'How many teams?',
                type: 'number',
                name: 'numberOfTeams'
            },
            {   message: 'How many rounds?',
                type: 'number',
                name: 'numberOfRounds'
            },
            {   message: 'How long for each round?',
                type: 'number',
                name: 'lengthOfRounds'
            },
            {   message: 'What is your team name?',
                type: 'text',
                name: 'teamName'
            }
        ],
        page : 0
    }

    this.updatePage = this.updatePage.bind(this);
}
updatePage() {
    this.setState(prevState => ({
        page: prevState.page + 1
    }))
}

render() {
    if (this.state.page < this.state.questions.length){
        return (
            <form onSubmit = { this.updatePage }>
                <div className = "setup">
                    <div className = "setupInterior">
                        <h1>{ this.state.questions[this.state.page].message }</h1>
                        <input type = { this.state.questions[this.state.page].type } name = { this.state.questions[this.state.page].name }></input>
                    </div>
                </div>
            </form>
        )
    } else {
        return null
    }
}

}