Convert a form's manual state juggling to React 19 Actions

You are migrating a React form from manual onSubmit plus useState plumbing to React 19's Actions APIs — the form action prop, useActionState, useFormStatus, and useOptimistic where it genuinely helps and not by default.

CURRENT FORM
A NewsletterSignup form with useState for email, isSubmitting, and error, an onSubmit handler that calls preventDefault, sets isSubmitting, awaits a fetch, and sets error or clears the field on success.

VALIDATION RULES
Email must be non-empty and match a basic email pattern; must not already be subscribed.

SUBMIT BEHAVIOR
On success, clear the field and show a confirmation message inline for five seconds; on failure, show the server error message next to the field without clearing what was typed.

OPTIMISTIC UI NEED
No — this is a low-frequency signup form, waiting a second for a real confirmation is fine.

MIGRATION RULES
Replace the manual isSubmitting, error, and success useState trio with useActionState wrapping a single async action function that performs both the validation and the submission. The action function must return a typed result object — for example { error: string | null } or a field-level error map — and must never throw past the action boundary for expected validation failures; only genuinely unexpected errors (a thrown network exception, a programming bug) should propagate as a thrown error. Use useFormStatus inside a child submit-button component, never inside the same component that renders the form tag itself — useFormStatus only reads pending status from the nearest parent form when it is called from a descendant of that form, and it silently returns default, non-pending values when called anywhere else, which looks like it works in a quick manual test and then never shows a pending state once shipped. Only add useOptimistic if the interface needs to show the result of an action before the server has confirmed it — a new message appearing instantly in a list, a like count incrementing before the request resolves. Do not add it just because it is available; most forms should simply wait for the real result and show a pending state instead. Keep client-side validation for instant per-field feedback while typing, but treat the action's own validation as the actual source of truth — the two must never be allowed to disagree, so if a rule exists client-side, the same rule must exist inside the action function too. If the form is rendered on the server and the action is passed directly to the form element's own action prop rather than triggered from an onClick handler, this preserves basic progressive enhancement — the form can still submit as a real HTTP request even if JavaScript has not finished hydrating yet — so avoid manually calling preventDefault or intercepting the submit event in a way that would defeat that; let the form's action prop own the submission. After a successful action that should clear the form, trigger the reset from the action's own returned state — for example by changing a key on the form or calling a ref's reset method in response to the new state — rather than manually clearing individual field values one at a time, which is easy to leave out of sync with whatever fields the form actually has.

OUTPUT FORMAT
1. The migrated form component and its separate submit-button child component, each in its own code block.
2. The action function, with its return type made fully explicit.
3. A short note on which useState calls were removed and precisely what replaced each one.
4. If useOptimistic was not added, one sentence confirming why it was correctly left out given the stated need.