react localStorage empty array and null on first rendering - reactjs

Question

I try to get used with localStorage and I run into something I'm confused with.
When I try to add the first task at the localStorage it doesn't save the task object however just an empty array and only then after adding the second task, it starts to save the object task ?
Since that my first point somehow isn't working correctly the second issue is that now when I clean up manually the localStorage and refresh the page I run into a null error that occurs.
Here is the code below if someone can give me some insight about it. Thank you
const SearchInput = () => {
const [taskValue, setTaskValue] = useState("");
const [allTasks, setAllTasks] = useState([]);
useEffect(() => {
const persistedTasks = JSON.parse(localStorage.getItem("tasks"));
setAllTasks(persistedTasks);
console.log(persistedTasks);
}, []);
const handleChange = (e) => {
setTaskValue(e.target.value);
};
const handleSubmit = (e) => {
e.preventDefault();
if (taskValue !== "") {
setAllTasks([
...allTasks,
{ id: allTasks.length + 1, text: taskValue.trim() },
]);
}
localStorage.setItem("tasks", JSON.stringify(allTasks));
setTaskValue("");
};
return (
<>
<Form onSubmit={handleSubmit}>
<input
type="text"
placeholder="Add a task..."
value={taskValue}
onChange={handleChange}
/>
<button>Submit the Task</button>
</Form>
<TasksContainer>
{!allTasks.length && <p>No tasks</p>}
{!!allTasks.length && (
<ul>
{allTasks.map((task) => (
<TaskWrapper key={task.id}>
<li>{task.text} </li>
<div>
<button>Edit</button>
<button>Delete</button>
</div>
</TaskWrapper>
))}
</ul>
)}
</TasksContainer>
</>
);
};