Can't use serverValidate with arrays [Zod, React Router 7]

[Visible-Radio]

Based on the docs I can not figure out if it is possible to work with arrays in a React Router Framework action. I want to work with the same data structure in the action as is created in the client side form state. The types for serverValidate suggest this is how it works. But it doesn't seem to be the case.

I was expecting serverValidate to work kind of like conform's parseWithZod, where you get objects matching the zod schema to work with, in addition to a first class way of returning validation errors from the server.

import type { Route } from './+types/route';
import { z } from 'zod';

import {
  ServerValidateError,
  createServerValidate,
  formOptions,
  initialFormState,
  useForm,
  useTransform,
  mergeForm,
} from '@tanstack/react-form-remix';
import { Form, useSubmit } from 'react-router';
import { cloudflareContext } from '~/context/cloudflare-context';
import { useRef } from 'react';

export async function loader(args: Route.LoaderArgs) {
  const { context } = args;
  const { db } = context.get(cloudflareContext);
  z.uuid().parse(args.params.batch);
  const fileRecord = await db.getFileById(args.params.file);
  return { fileRecord };
}

const exampleSchema = z.object({
  stringExample: z.string().min(1, 'Name is required'),
  mapping: z.array(z.tuple([z.string(), z.string()])),
});

export const formOpts = formOptions({
  defaultValues: {
    stringExample: 'static default value',
    mapping: [['src', 'dest']],
  },
  validators: {
    onSubmit: exampleSchema,
  },
});

const serverValidate = createServerValidate({
  ...formOpts,
  onServerValidate: (args) => {
    console.log('onServerValidate', args.value);
  },
});

export async function action({ request }: Route.ActionArgs) {
  const formData = await request.formData();

  try {
    const validatedData = await serverValidate(formData);
    console.log('validatedData', validatedData);
  } catch (e) {
    if (e instanceof ServerValidateError) {
      return e.formState;
    }
    throw e;
  }
}

export default function UploaderBatchFile({
  actionData,
  loaderData,
}: Route.ComponentProps) {
  const submit = useSubmit();
  const formRef = useRef<HTMLFormElement>(null);
  const form = useForm({
    ...formOpts,
    defaultValues: {
      ...formOpts.defaultValues,
      mapping: loaderData.fileRecord.mapping.map(([src, dest]) => [
        src,
        dest ?? '',
      ]),
    },
    onSubmit: (args) => {
      console.log('SUBMIT GOT:', args.value); // gets a { stringExample: string, mapping: Array<[string,string]>} ✅
      // would like to work with the same data on the server after validation.

      // can submit like this
      submit(args.value, { method: 'POST' });
      /* 
      on the server, serverValidate says we'll get at { stringExample: string, mapping: Array<[string,string]>}
      but we actually get a { stringExample: string, mapping: string}, where mapping is a comma separated list ❌
      validatedData {
        stringExample: 'static default value',
        mapping: 'ip_address,foo,hostname,bar,mac_address,baz,device_type,etc ,vlan,etc1,status,etc3,location,,department,,last_seen,,notes,'
        }
        */

      // or we can submit the form itself via a ref like this
      submit(formRef.current, { method: 'POST' });
      /* 
      serverValidate returns a structure like this ❌
      {
        firstName: 'static default value',
        mapping0: '',
        mapping1: '',
        mapping2: '',
        mapping3: '',
        mapping4: '',
        mapping5: '',
        mapping6: '',
        mapping7: '',
        mapping8: '',
        mapping9: ''
      }
      */

      // or we can submit as json and access using request.json() in the action
      submit(formRef.current, { method: 'POST', encType: 'application/json' });
      // but serverValidate expects a crusty old formData ❌
    },
    transform: useTransform(
      (baseForm) => mergeForm(baseForm, actionData ?? initialFormState),
      [actionData],
    ),
  });

  return (
    <div className="relative overflow-hidden slide-card">
      <Form navigate={false} onSubmit={form.handleSubmit} ref={formRef}>
        <form.Field name="stringExample">
          {(field) => {
            return (
              <div>
                <input
                  name="firstName"
                  type="text"
                  value={field.state.value}
                  onChange={(e) => field.handleChange(e.target.value)}
                />
                {field.state.meta.errors.map((error) => (
                  /* these are actually zod errors 🙂 */
                  <p key={error?.message}>{error?.message}</p>
                ))}
              </div>
            );
          }}
        </form.Field>
        <form.Field name={'mapping'} mode="array">
          {(field) => (
            <div>
              {field.state.value.map((value, i) => {
                return (
                  <div key={i}>
                    <input
                      name={`mapping${[i]}`}
                      value={field.state.value[i][1]}
                      onChange={(e) =>
                        field.handleChange((prev) => {
                          const next = [...prev];
                          next[i] = [prev[i][0], e.target.value];
                          return next;
                        })
                      }
                      placeholder={`<${field.state.value[i][0]}>`}
                    />

                    {field.state.meta.errors.map((error) => (
                      <p key={error?.message}>{error?.message}</p>
                    ))}
                  </div>
                );
              })}
            </div>
          )}
        </form.Field>
        <form.Subscribe
          selector={(formState) => [
            formState.canSubmit,
            formState.isSubmitting,
          ]}
        >
          {([canSubmit, isSubmitting]) => (
            <button type="submit" disabled={!canSubmit}>
              {isSubmitting ? '...' : 'Submit'}
            </button>
          )}
        </form.Subscribe>
      </Form>
    </div>
  );
}