hello guys I'm quite new to react but this error is working outside an useEffect and an useState hook can someone please tell me whats the problem with my code which it cannot enter the useEffect loop and before that we face error however if I remove taskStructure:{ daysToBeCompleted, taskStatus, taskAuthor, taskModifier, dateCreated, dateModified }

everything will be fine and work correctly.

 import React, { useEffect, useState } from "react";
import { Grid , Stack, Box } from "@mui/material";
import "./tasks.style.css";



const Tasks = () => {
    const [ TaskConfig, setTaskConfig] = useState([]);
    
useEffect( () => {
    setTaskConfig(
        {
        _id:"01",
        taskTitle:"taskTitle",
        taskStructure:{
        taskDescription:"taskDescription",
        daysToBeCompleted:"daysToBeCompleted",
        taskStatus:"taskStatus",
        taskAuthor:"taskAuthor",
        dateCreated:"dateCreated",
        taskModifier:"taskModifier",
        dateModified:"dateModified"
        }}
)
},[])

const {  taskTitle,
taskDescription,
taskStructure:{
daysToBeCompleted,
taskStatus,
taskAuthor,
taskModifier,
dateCreated,
dateModified
}} = TaskConfig;

return(
<Box 
className="taskBox"
>
<Stack 
direction="column"
>
<Grid>  
{taskTitle} 
</Grid>
<Grid>
{taskDescription} {daysToBeCompleted} {taskStatus} 
</Grid>
<Grid>
{taskAuthor} {dateCreated} {taskModifier} {dateModified}
</Grid>

</Stack>
</Box>
);
}

export default Tasks;