How to conditionally render a React component?

Question

React

The component has a useEffect method in which a request for a back is thrown, three arrays arrive from the back in the form:

{
  done: [],
  deleted: [],
  todo: []
}

I throw them into the state, the state changes accordingly, the value of allTasksDone changes to false in the line: and my items should be rendered further, but this does not happen
if (!allTasksDone) return <>загрузка</>

export const TodoList = ({ update }: TodoListProps) => {
    const [data, setData] = useState<any>()
    const allTasksDone = data?.allTasks?.todo

    useEffect(() => {
        const requestBackend = new fetchBackend({ token: localStorage.getItem('token') })

        requestBackend.get('/client/getAlltasks').then((response) => response.json()).then((response) => {
            setData(response)
        })
    }, [update])

    if (!allTasksDone) return <>загрузка</>

    return (
        allTasksDone.map((task: any) => {
            return <TodoItem taskName={task} done={false} />
        })
    )
}