React / TypeScript error when updating array using setState()

I am looking to modify a property of one of the items in the array using the updater returned from setState. The function is passed as props to the child, who then call this with their own index to change their status.

  const tryMarkHabitAsComplete = (index: number) => {    let list: HabitType[] = [...habitList];    let habit = {      ...list[index],      isComplete: true,    };    list[index] = habit;    setHabitList({list});  };

When running withsetHabitList(list); the array gets cleared and becomes undefined, so I am unable to use it after I call this function once.

The error that keeps appearing is:

Argument of type '{ list: HabitType[]; }' is not assignable to parameter of type 'SetStateAction<HabitType[]>'. Object literal may only specify known properties, and 'list' does not exist in type 'SetStateAction<HabitType[]>'

I am treating the state as immutable and attempting (I think) to set the state. When debugging, everytime I click I empty the array for my habitsList. Further up, I define the state as:

const [habitList, setHabitList] = useState<HabitType[]>([]);

If I try to setState in other ways, the array becomes undefined or blank and loses information. I should clarify, this is a side project written w/ react-native.

MRE Edit:

2 components in a react-native app, discarding css & irrelevant imports:Chain.tsx

export type HabitType = {  text: string;  index: number;  isComplete: boolean;  tryMarkHabit: (index: number) => void;};const Chain = (props: any) => {  const [habitList, setHabitList] = useState<HabitType[]>([]);  // Set the initial state once w/ dummy values  useEffect(() => {    setHabitList([      {        text: "1",        index: 0,        isComplete: false,        tryMarkHabit: tryMarkHabitAsComplete,      },      {        text: "2",        index: 1,        isComplete: false,        tryMarkHabit: tryMarkHabitAsComplete,      }    ]);  }, []);  // Only is previous item is complete, let habit be marked as complete  const tryMarkHabitAsComplete = (index: number) => {    let list: HabitType[] = [...habitList];    let habit = {      ...list[index],      isComplete: true,    };    list[index] = habit;    setHabitList(list);  };  let habitKeyCount = 0;  return (<View style={styles.container}>      {habitList.map((habit) => (<Habit key={habitKeyCount++} {...habit} />      ))}</View>  );};export default Chain;

Habit.tsx

import { HabitType } from "./Chain";const Habit = ({ text, index, isComplete, tryMarkHabit }: HabitType) => {  const [complete, setComplete] = useState<boolean>(false);  return (<TouchableOpacity      style={complete ? styles.completeHabit : styles.uncompleteHabit}      onPress={() => tryMarkHabit(index)}><Text style={styles.chainText}>{text}</Text></TouchableOpacity>  );};export default Habit;

When I press a habit, it calls tryMarkHabitAsComplete successfully, however it appears to clear the array - the array afterwards becomes undefined as far as I can tell.