Cant display todo items in simple React app - reactjs

Question

i am new to React and i want to build a simple todo app.
I have made two components one to make a todo item and one for display it.
import { useRef, useState } from "react";
import TodoList from "./TodoList";
function TodoForm() {
const inputItem = useRef();
const [itemExist, setItem] = useState(false);
function submitHandler(event) {
event.preventDefault();
setItem(true);
}
return (
<div>
<form onSubmit={submitHandler}>
<label>
Todo-item
<input name="item" type="text" ref={inputItem}></input>
</label>
<input type="submit"></input>
</form>
{itemExist && <TodoList item={inputItem.current.value}></TodoList>}
</div>
);
}
export default TodoForm;
Component for display the doto items
function TodoList(props) {
return (
<ul>
<li>{props.item }</li>
</ul>
);
}
export default TodoList;
When i submit the first item i cant add other item.
I have tried to to change the itemExist to false under the
{itemExist && <TodoList item={inputItem.current.value}></TodoList>}
but error occurs. Uncaught Error: Too many re-renders

Answer 1

function TodoForm() {
const inputItem = useRef();
const [todos, setTodos] = useState([]);
function submitHandler(event) {
event.preventDefault();
let newTodos = [...todos, { inputItem.current.value }];
setTodos(newTodos);
}
return (
<div>
<form onSubmit={submitHandler}>
<label>
Todo-item
<input name="item" type="text" ref={inputItem}></input>
</label>
<input type="submit"></input>
</form>
{todos.map((todo, i) => {
return(
<TodoList key={`todo_${i}`} item={todo}></TodoList>
)
})}
</div>
);
}