NEXTJS 13 App router - failed server action invoked in client component not rendering error.tsx

Question

Using app router, I have a react server component (RSC) page. Inside of that RSC I have a component called MYFORM (which is a client component, that renders a formik form).

OnSubmit, I fire a server action to post data via formik's onSubmit prop:

• If successful, the server action will redirect
• if unsuccessful the server action will throw an error

Just like when an error occurs in a RSC I expect the error object to be passed to the nearest error.tsx.

But seems when a server action called from a client component fails the nearest error.tsx isn't rendered.

Why?

I seen it can be achieved with useTransition hook - like mentioned in this thread https://github.com/vercel/next.js/issues/42525

I tried doing something like this which works, but i'm not entirely sure why ?

app/components/MyForm

"use client"

export default function MyForm(){
        // some stuff here but not relevant to display

    return (
        <Formik
            initialValues={{ email: '' }}
            id="register"
            onSubmit={async (values) => {
                await myServerAction(values);
            }}
        >
            <Field type="email" name="email" placeholder="Email" />
            <button type="submit">Submit</button>
        </Formik>
    );
};

app/page.tsx

export default async function Page(props) {
    // This is serverWorld
        // If someFetch throws an error it will be passed to the nearest  error.js

    const { data } = someFetch(url);

    return (
        <div>
            <SomeCompenent data={data} /> {/* This SomeComponent not relevant */}
            
                        <MyForm />
        </div>
    );
}