Страница загружается быстрее чем выполняется запрос на бэкэнд

У меня есть сайт на React, один из компонентов должен выводить массив из элементов полученых через запрос, но запрос не успевает отработать и он выдает ошибку TypeError: Cannot read property 'task' of null

Суть такая: в loadingHandler описан запрос на сервер с целью получения массива JSON объектов. Но страница загружается быстрее чем код успевает записать ответ запроса в useState и из-за этого появляется ошибка (я так думаю). Помогите пожалуйста найти и устранить проблему. Спасибо

Код главного компонента MainPage

import React, { useState, useContext, useEffect, useCallback } from "react"
import { useHttp } from "../hooks/http.hook"
import { useMessage } from "../hooks/message.hook"
import { AuthContext } from "../context/AuthContext"
import "../styles/MainPage.css"

import { NavBar } from "../components/NavBar"
import { CreatingDialog } from "./../components/CreatingDialog"
import { TasksPanel } from "../components/TasksPanel"

export const MainPage = () => {
  const context = useContext(AuthContext)
  const message = useMessage()
  const { loading, error, clearError, request } = useHttp()
  const [tasks, setTasks] = useState([null])
  const [userInfo, setUserInfo] = useState({
    name: "",
    lastname: "",
    job: "",
    totalTasks: 0,
  })

  const loadingHandler = useCallback(async () => {
    const tasksRes = await request("/api/tasks/all")
    while (loading) {}
    setTasks(tasksRes)

    const { name, lastname, job } = await request(
      "/api/users/user?id=" + context.userId
    )
    const totalTasks = await request(
      "/api/tasks/userTasks?id=" + context.userId
    )
    setUserInfo({ name, lastname, job, totalTasks: totalTasks.length })
  }, [context.userId, request, setUserInfo, setTasks])

  useEffect(() => {
    loadingHandler()
  }, [loadingHandler])

  return (
    <div className="MainPage-wrapper">
      <NavBar
        name={userInfo.name}
        lastname={userInfo.lastname}
        job={userInfo.job}
        totalTasks={userInfo.totalTasks}
      />
      <CreatingDialog />
      <TasksPanel tasks={tasks} />
    </div>
  )
}

Код компонента TasksPanel (в нём вызывается ошибка)

import React from "react"

import { OpenTask } from "../components/OpenTask"

export const TasksPanel = (props) => {
  return (
    <div className="tasks-panel">
      {props.tasks.map((task) => {
        return <OpenTask taskText={task.task} />
      })}
    </div>
  )
}

Код компонента OpenTask

import React from "react"
import "../styles/Tasks.css"

export const OpenTask = (props) => {
  return (
    <div className="task open-task">
      <h4>{props.taskText}</h4>
    </div>
  )
}