React does not re-render children components

I wrote a simple task manager but it all falls apart when I try to manage all data from one point. (TaskManager component)
Simply, I have a TaskManager component which is the container of all data. Then there are Table‘s which inside them there are Task‘s. (All code exist down here)
I’m using json-server to get behavior of an API and update the view but it doesn’t show me the tasks that loaded in.

Note: Just to have a simple design, I added some styling with tailwind.

// TaskManager.tsx
import axios from "axios";
import { useEffect, useState } from "react";
import Table, { TableInterface } from "../components/Test/Table";
import { TaskInterface } from "@/components/Test/Task";

const TaskManager: React.FC = () => {
    const [tables, setTables] = useState<TableInterface[]>([]);
    useEffect(() => {
        axios
            .get<TableInterface[]>("http://127.0.0.1:5000/tables")
            .then((results) => {
                setTables(results.data);
            });
    }, []);

    useEffect(() => {
        if (tables.length <= 0) return;
        for (let i = 0; i < tables.length; i++) {
            const element = tables[i];
            if (element.tasks) continue;
            axios
                .get<TaskInterface[]>(`http://127.0.0.1:5000/tasks/${element.id}`)
                .then((results) => {
                    tables[i].tasks = results.data;
                    setTables(tables);
                });
        }
    }, [tables]);

    return (
        <>
            <div className="bg-green-800 flex space-x-6 m-5 rounded-lg">
                {tables.map((element) => {
                    const key = `${element.id}-${
                        element.tasks ? element.tasks.length : 0
                    }`;
                    return (
                        <Table
                            key={key}
                            id={element.id}
                            title={element.title}
                            tasks={element.tasks ? element.tasks : []}
                        />
                    );
                })}
            </div>
        </>
    );
};

export default TaskManager;

Inside Table I do nothing but showing tasks.

// Table.tsx
import Task, { TaskInterface } from "./Task";

export interface TableInterface {
    id: number;
    title: string;
    tasks: TaskInterface[];
}

const Table: React.FC<TableInterface> = (props) => {
    return (
        <div>
            <div className="font-bold text-center p-2 text-2xl">{props.title}</div>
            <div className="flex flex-col w-80 bg-slate-700 m-2 rounded-lg space-y-2 overflow-hidden">
                {props.tasks.map((item) => {
                    return <Task key={item.id} id={item.id} name={item.name} />;
                })}
            </div>
        </div>
    );
};

export default Table;

Inside Task nothing happens, just a simple render.

// Task.tsx
export interface TaskInterface {
    id: number;
    name: string;
}

const Task: React.FC<TaskInterface> = (props) => {
    return (
        <div className="bg-slate-300 w-full text-gray-900 text-lg p-2">
            {props.id}
        </div>
    );
};

export default Task;

What is the Question?

Why tasks don’t show up on the screen or the more technical question is, why Tables do not re-render?
How to fix the problem so that tasks actually render on the screen?

This is what I see when it gets rendered.

Just to clarify, on my system there are 9 tasks for first column and 2 for the next one and inside react developer tools I see my data.

Note: This is a one month old question that I just ignored till today.
Note: I’m not a pro front-end developer, I’m a big noob so if you have some advises, I’ll be happy to hear them.

>Solution :

Try using setState([…oldArr, newEl]) instead of just putting data there. Im a noob too btw so let’s try to resolve it together, I had the same question 2 days ago and never researched on it