Inertia useForm errors coming empty from the validation rule

Hey there

I am in middle of a puzzle here.

I am using React JS and Inertia, for some reason when I make a POST request to my controller the useForm > errors is not returning anything.

My react component

import { useForm } from "@inertiajs/react";
import { FormEventHandler, ChangeEventHandler } from "react";
import { Button } from "../ui/button";
import { Input } from "../ui/input";

interface LogoFormData {
    logo: File | null;
    [key: string]: any;
}

export function LogoForm() {
    const { data, setData, post, clearErrors, setError, processing, errors } =
        useForm<LogoFormData>({
            logo: null,
            test: ''
        });

    /**
     * Handles the form submission event.
     *
     * @param {FormEvent} e - The form event object.
     * @returns {void}
     */
    const submit: FormEventHandler = (e) => {
        e.preventDefault();
        post(route("setup.logo.store"));
    };

    const handleFileChange: ChangeEventHandler<HTMLInputElement> = (e) => {
        const file = e.target.files?.[0];
        // check if file is png or jpg, if not, set error
        if (file && !["image/png", "image/jpeg"].includes(file.type)) {
            setError("logo", "Use uma imagem PNG ou JPG.");
            setData("logo", null);
            return;
        }
       // clearErrors("logo");
        if (!file) {
            setError("logo", "Selecione um arquivo.");
            setData("logo", null);
            return;
        }
        setData("logo", file);
    };

    // this comes as {} from rules in Request
    console.log(errors);

    return (
        <>
            <form onSubmit={submit}>
                <div className="grid w-full max-w-sm items-center gap-1.5">
                    <label
                        className={
                            `flex border p-2 my-2 cursor-pointer hover:border-green-500 text-sm rounded-sm` +
                            (errors.logo ? " border-red-500" : "")
                        }
                        htmlFor="logo"
                    >
                        {data.logo ? (
                            <span>{data.logo.name}</span>
                        ) : (
                            "Selecionar Logo"
                        )}
                    </label>
                    <Input
                        id="logo"
                        type="file"
                        hidden
                        onChange={handleFileChange}
                        accept="image/*"
                    />
                </div>
                {errors.logo && (
                    <p className="text-red-500 mb-2 text-sm">{errors.logo}</p>
                )}
                <Button type="submit">
                    {processing ? "Salvando..." : "Salvar Logo"}
                </Button>
            </form>
        </>
    );
}

My request

public function rules(): array
    {
        return [
            'logo' => ['required'],
            'test' => [ 'required',
            'string',
            'lowercase',
            'email',
            'max:255']
        ];
    }

Note, I added the "test" just for sake of testing, the logo I am sending it as not required / empty as well to validate, when I dd($this->all) the rules{} I get the screen just fine.

When I inspect the console for console.log(errors); it just returns {}

I believe I am missing something really basic, my login / register form was bringing the validation just fine but when I was writing this question I tested it again to compare the props: and noticed neither the previous worked forms are now not bringing anything back on error.email for example.