I am very new to Reactjs+Typescript and i am trying to figure out why i am getting the error below.

React 16.9

const STEP_STATUS = {  COMPLETED: "Completed",  INCOMPLETE: "Incomplete",};const Foo = () => {  const [state, setState] = useState({    step: 1,    firstName: '',    lastName: '',    status: STEP_STATUS["INCOMPLETE"],  });const nextStep = () => {    setState({...state, step: state.step + 1});  }useEffect(() => {    if (state.step + 1 !== state.step) {      // setState(prev => {...prev, state.step = STEP_STATUS["COMPLETED"]}); // I tried this too      setState(...state, state.status = STEP_STATUS["COMPLETED"]);    } else {      console.log("error");  // don't mind this line    }  }, [state]);

I am trying to create a side effect using useEffect, after pressing the button nextStep(which brings the user to the next page), I want to update the status of current page to "Completed" before we get to the next page.

I might really be doing this wrong.

Any help would be very helpful.

current error

×TypeError: state is not iterable  53 | useEffect(() => {  54 |   if (state.step + 1 !== state.step) {  55 |     // setState(prev => {...prev, state.step = STEP_STATUS["COMPLETED"]});> 56 |     setState(...state, state.status = STEP_STATUS["COMPLETED"]);     | ^  57 |   } else {  58 |     console.log("error");  59 |   }