I am using useFormState in simple components that are trying to save data. Sometimes the data being requested to save with is invalid, and I need to tell the user so. But when the final state change in the Server Action is set to saved: true then if someone tries to do subsequent saves (without refreshing the page) then they cannot because saved is frozen as being true because it doesn't change between subsequent form submissions.I was hoping there'd be a manual setState function inside of useFormState but no such luck.

Is there a pattern I am not aware of that allows you to update this state from the server component, but maybe allow it to be manually changed? Basic example below:

export const saveDataServerAction = async (
  prevData: SaveDataState,
  formData: FormData,
): Promise<SavePersonGroupsFieldsState> => {
  try {
    const personId = prevData.personData.id;
    const groups = formData.getAll('groups');
    const user = await getSessionUser();
    const client = new Client({
      BASE: process.env.API_URL,
      TOKEN: user?.accessToken,
    });
    const response = await client.adminSetPersonGroups({
      personId,
      requestBody: {
        groupIds: groups.map((group) => Number(group)),
      },
    });
    return { saved: true };
  } catch (error) {
    console.error(error);
    return {
      saved: false,
      message: 'Error saving data',
    };
  }
};