index.js

// pages/index.js

export default function Home() {

    const storeTasks = useGlobalStore((state) => state.tasks);
    const storeDeleteTask = useGlobalStore((state) => state.deleteTask);
    const storeClearTasks = useGlobalStore((state) => state.clearTasks);
    const storeMarkTaskAsDone = useGlobalStore((state) => state.markTaskAsDone);
    const storeMarkTaskAsUndone = useGlobalStore((state) => state.markTaskAsUndone);

    const [tasks, setTasks] = useState([]);

    useEffect(() => {
        setTasks(storeTasks);
    }, [storeTasks]);

    return (
        // ...
            <Grid container spacing={2}>
              {tasks.map((task) => (
                <Grid item xs={12} md={4} key={task.id}>
                  <Task
                    {...task}
                    markTaskAsDone={storeMarkTaskAsDone} 
                    markTaskAsUndone={storeMarkTaskAsUndone}
                    deleteTask={storeDeleteTask}
                  />
                </Grid>
              ))}
            </Grid>
        // ...
    );
}

// Your final file should look like this:
// https://github.com/duplxey/back4app-containers-nextjs/blob/master/pages/index.js