How to update nested store values such that it triggers updates

export interface IUserState {
  projectGroups: IProjectGroup[];
}

export interface IProjectGroup {
  name: string;
  projects: IProject[];
}

export type IProject =
  | {
      name: string;
      description: string;
      logs: IActivityLog[];
    } & Xor<
      { paid: true; hourlyRate: number; currency: string },
      { paid: false }
    >;

export interface IUserState {
  projectGroups: IProjectGroup[];
}

export interface IProjectGroup {
  name: string;
  projects: IProject[];
}

export type IProject =
  | {
      name: string;
      description: string;
      logs: IActivityLog[];
    } & Xor<
      { paid: true; hourlyRate: number; currency: string },
      { paid: false }
    >;

setUserState(
  "projectGroups",
  produce((projectGroups) => {
    projectGroups[groupIndex].projects = [
      ...projectGroups[groupIndex].projects,
      (formData.paid
        ? {
            name: formData.name,
            description: "",
            paid: true,
            logs: [],
            hourlyRate: formData.hourlyRate,
            currency: formData.currency,
          }
        : {
            name: formData.name,
            description: "",
            logs: [],
            paid: false,
          }) as IProject,
    ];
  })
);

setUserState(
  "projectGroups",
  produce((projectGroups) => {
    projectGroups[groupIndex].projects = [
      ...projectGroups[groupIndex].projects,
      (formData.paid
        ? {
            name: formData.name,
            description: "",
            paid: true,
            logs: [],
            hourlyRate: formData.hourlyRate,
            currency: formData.currency,
          }
        : {
            name: formData.name,
            description: "",
            logs: [],
            paid: false,
          }) as IProject,
    ];
  })
);