Newbie: Hard time integrating remix-validated-form with indie-stack login

[Jarrodsz]

Im having a really hard time trying to integrate the remix-validated-form and login my user into my application.
I have cross referenced several repro's like indie-stack's login mechanism and the example application.

I use the components from example application then:

EDIT: Cleaned up version minimialized.

Im getting String Expected, Array received.
The button on SubmitButton keeps spinning, nothing happens.
So I tried setting console.logs in my code to see where the code flows true but they are not outputted to the shell.
Even not with node npm run dev --verbose

/app/routes/Login.tsx

import {
    Box,
    Button,
    Stack,
    HStack,
    Container,
    Text,
    VStack, Center, FormControl, Checkbox, Flex,
} from "@chakra-ui/react";
import React, { useState } from "react";
import * as z from "zod";
import {ValidatedForm, validationError} from "remix-validated-form";
import {withZod} from "@remix-validated-form/with-zod";
import {useNavigate, Link, useActionData} from "@remix-run/react";
import {FormInput} from "app/components/form/FormInput";
import {SubmitButton} from "app/components/form/SubmitButton";
import type {ActionFunction, LoaderFunction, redirect} from "@remix-run/node";
import {json, LoaderArgs} from "@remix-run/node";
import { createUserSession, getUserId } from "~/session.server";
import { safeRedirect } from "~/utils";
import {formData} from "zod-form-data";

const userSchema = z.object({
    email: z.string(),
    password: z.string()
});

export const userFormValidator = withZod(userSchema);


export async function loader({ request }: LoaderArgs) {
    const userId = await getUserId(request);
    if (userId) return redirect("/");
    return json({});
}

export const action: ActionFunction = async ({ request }) => {

    console.log("inside actin");

    const fieldValues = await userFormValidator.validate(
        await request.formData()
    );

    if (fieldValues.error) return validationError(fieldValues.error);

    return createUserSession({
        request,
        userId: user.id,
        remember: remember === "on" ? true : false,
        redirectTo,
    });

    return redirect("/user");
};

export default function LoginPage({defaultValues}: {
    defaultValues?: Partial<z.infer<typeof userSchema>>;
}) {
    return (

        <>
            

                            <ValidatedForm
                                validator={userFormValidator}
                                defaultValues={defaultValues}
                                method="post"
                                noValidate
                            >
                                
                                            <FormControl>
                                                <FormInput name="email" label="Email"/>
                                                <FormInput name="password" label="Password"/>                                                                                             
                                            </FormControl>       

                         </ValidatedForm>

        </>
    );
}

[airjp73]

Hi! The simplified version you have here doesn't appear to have any obvious mistakes. I can see the issue looking at your original post though.

<FormInput name="email" label="Email"/>
<FormInput name="password" label="Password"/>
<FormInput
  name="email"
  size={"lg"}
  type="email"
  placeholder={"Email"}
  borderBottom={0}
  borderBottomRadius={0}
  autoComplete="current-password"
  ria-describedby="password-error"
/>

You have two inputs with name="email". This is going to result in the email field being treated as an array (because there are two values). It looks like you probably intended to name the second email field something like passwordConfirmation.