Using a client component that looks like

const AddModuleForm = ({ children }: Props) => {
  const [addProfileState, addProfileAction] = useFormState(addModuleToProfile, null);
  const { toast } = useToast();

  if (addProfileState?.error) {
    console.log('error', addProfileState.message);
    toast({
      title: 'Error',
      description: addProfileState.message,
      variant: 'error',
    });
  }

  return (
    <form action={addProfileAction}>
      {children}
      <Button color="blue" className="text-sm">
        <PlusIcon size={18} className="mr-1 mt-0.5" /> Add To Profile
      </Button>
    </form>
  );
};

export default AddModuleForm;

if the action fails, I send a JSON object with an error message. If is use this toast (based on shadcn/ui) I get the render error not sure why. Any ideas as to what is happening?

TIA