Update context without replacing existing values (React) - reactjs

Question

Description of the problem
I'm trying to display different tasks from my context. Every time I submit my form, I want a new Task to appear under the other, instead of that after form submission the old task just gets replaced by the new one. I'm sure it's a mediocre problem, but this is my first react project.
Also, I'm using styled components so I'm leaving the css out of the code blocks for readability.
Context
import { createContext, useState } from "react";
export const TaskContext = createContext();
export const TaskProvider = ({ children }) => {
const [tasks, setTasks] = useState([]);
return (
<TaskContext.Provider
value={{
tasks,
setTasks,
}}
>
{children}
</TaskContext.Provider>
);
};
Form
import React from "react";
import styled from "styled-components";
import { useState, useContext } from "react";
import { TaskContext, TaskProvider } from "../TaskContext";
export default function Form() {
const [text, setText] = useState([]);
const [time, setTime] = useState([]);
const [reminder, setReminder] = useState(false);
const task = useContext(TaskContext);
const submitHandler = (e) => {
e.preventDefault();
task.setTasks([{ text, time, reminder }]);
setText("");
setTime("");
setReminder(false);
};
return (
<StyledForm onSubmit={submitHandler}>
<FormControl>
<Label>Task</Label>
<Input
type="text"
placeholder="Add Task"
value={text}
required
onChange={(e) => setText(e.target.value)}
></Input>
</FormControl>
<FormControl>
<Label>Day & Time</Label>
<Input
type="text"
placeholder="Add Day ß Time"
required
value={time}
onChange={(e) => setTime(e.target.value)}
></Input>
</FormControl>
<FormControlCheck>
<FormControlCheckLabel>Set Reminder</FormControlCheckLabel>
<FormControlCheckInput
type="checkbox"
value={reminder}
onChange={(e) => setReminder(e.currentTarget.checked)}
></FormControlCheckInput>
</FormControlCheck>
<Submit type="submit" value="Save Task"></Submit>
</StyledForm>
);
}
Tasks
import React from "react";
import { useContext } from "react";
import { TaskContext } from "../TaskContext";
import Task from "./Task";
export default function Tasks() {
const context = useContext(TaskContext);
return (
<>
{context.tasks.map((task) => (
<Task text={task.text} time={task.time} reminder={task.reminder}></Task>
))}
</>
);
}
Task
import React from "react";
import styled from "styled-components";
export default function Task(props) {
return (
<StyledTask>
<HeaderThree>{props.text}</HeaderThree>
<Parag>{props.time}</Parag>
</StyledTask>
);
}
Thanks if you took the time to read my post!

Answer 1

You just put a new task object into task array, that's why all old tasks will disappear. The solutions is you spread out the old tasks first, then add new task after that.
in submitHandler
replace task.setTasks([{ text, time, reminder }]);
with task.setTasks([...task.tasks, { text, time, reminder }]);