auto complete types between inertiaJS in react and typescript to laravel

I am trying to build a dynamic form

export const FORM_INPUT_TEXT = 1;

export type BaseFormField = {
    type: number,
    name: string,
    label: string,
    placeholder?: string,
    initialValue?: any,
}

export type TextInput = BaseFormField & {
    type: 1,
};


export type FormField =
    | BaseFormField


function formInput(field: FormField, values, setValues, errors) {
    switch (field.type) {
        case FORM_INPUT_TEXT:
            return (<Input
                label={field.label}
                placeholder={field.placeholder ?? field.label}
                value={values[field.name]}
                onChange={e => setValues(field.name, e.target.value)}
                error={errors[field.name]}
            />)

    }
}

type Props = {
    fields: FormField[]
    submitUrl: string
}

here is the props and types

trying to render it in the controller

        return Inertia::render('Clients/ClientsCreate', [
            "submit" => "/client",
            "fields" => [[
                "type" => 1,
                "name" => "name",
                "label" => "Name",
                "placeholder" => "Enter your name",
            ]]
        ]);

would love if the IDE understood what was going on and autocomplete or help me writing down the fields

what are your thoughts on that.