Fetcher Error Handling

test.tsx

import { useFetcher } from "@remix-run/react";
import { Control, Field, Message, Root, Submit } from "@radix-ui/react-form";
import { useEffect, useState } from "react";
import { type DataFunctionArgs } from "@remix-run/node";

export default function Testing() {
  const { Form, data } = useFetcher<typeof action>();
  const [error, setError] = useState(false);

  useEffect(() => {
    if (data?.error) {
      setError(data?.error);
    }
  }, [data]);

  return (
    <Root asChild>
      <Form
        method="POST"
      >
        <Field serverInvalid={error} name="email">
          <Control asChild>
            <input
              onChange={() => {
                setError(false);
              }}
              className="invalid:border-red-900 text-black border-2 box-border w-full bg-blackA2 shadow-blackA6 inline-flex h-[35px] appearance-none items-center justify-center rounded-[4px] px-[10px] text-[15px] leading-none shadow-[0_0_0_1px] outline-none"
              type="email"
              required
            />
          </Control>
          <Message match="typeMismatch" forceMatch={error}>
            Please provide a valid email.
          </Message>
        </Field>
        <Submit>Submit</Submit>
      </Form>
    </Root>
  );
}

export async function action({ request }: DataFunctionArgs) {
  const form = await request.formData();
  const email = form.get("email");

  if (email === "[email protected]") {
    return { error: true };
  }
  return { error: false };
}