При post запросе обновляется страница и содержимое пропадает

разрабатываю todo-list, у которого есть 3 секции:

1. Хедер, в котором содержится форма с полем ввода куда должна записываться задача и кнопка, при нажатии на которую задача должна попадать в список дел
2. main часть, содержащая список дел
3. Футер, куда попадают выполненные задачи. Также я создал фейковый api в папке с проектом - data.json Суть проблемы в том, что при нажатии на кнопку добавления задачи, задача попадает в список дел, но страница почему-то обновляется и задача пропадает. А сам post запрос проходит и data.json появляется новая сущность.

    <header class="header">
        <div class="header__container _container">
            <form  name="task-form"  class="header__form">
                <input name="task-name" type="text" class="header__form-input" placeholder="Add a new task">
                <button type="submit"  class="header__form-button">+</button>
            </form>
        </div>
    </header>
    <main class="tasks">
        <div class="tasks__container _container">
            <p class="tasks-todo">Tasks to do - <span class="tasks-todo-length"></span> </p>
            <ul class="tasks__list">
                
            </ul>
        </div>
    </main>
    <footer class="completed-tasks">
        <div class="completed-tasks__container _container">
            <p class="tasks-done">Done - <span class="tasks-done-length"></span></p>
            <ul class="done-list">
                
            </ul>
        </div>
    </footer>

    <template id="task-template">
        <li class="todo-task task">
            <p class="task-text"></p>
            <div class="button__wrapper">
                    <button class="task-complete-button"></button>
                    <button class="task-delete-button"></button>
                </div>
        </li>
    </template>
    <template id="completed-task-template">
        <li class="todo-task task">
            <p class="task-text"></p>
        </li>
    </template>

JS:
    taskForm.addEventListener('submit', formAddTaskSubmit)

function formAddTaskSubmit(evt) {
    evt.preventDefault();
    postRequest(taskInput.value)
    .then((data) =>
    {
        const taskContent = taskTemplate.querySelector('.todo-task').cloneNode(true)            // Клик по кнопке добавления задачи добавляет её в список задач
        const task = (taskContent.closest('.task'))
        tasksList.append(task)
        const taskText = (taskContent.querySelector('.task-text').textContent = data.title)
        taskForm.reset()
        taskTodoLength.textContent = tasksList.children.length
    })
}

function postRequest (inputValue) {
    return fetch('http://localhost:3000/todos', {
        method: 'POST',
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify({
            title: inputValue,
            completed: false
        })
    })
    .then(checkServerState)
}

function checkServerState(res) {
  if (res.ok) {
    return res.json();
  } else {
    return Promise.reject(`Ошибка ${res.status}`);
  }
}