Typescript eslint dont not recognize object in array

Hellow i got some problem with typescript or eslint (im new in eslint).


I show code, and next try to explain the error.


types.ts
export type TSettingsIputsState = {
personal: {
label: string;
name: keyof TApiResponseProfile;
value: string;
activeEdit: boolean;
onActionButtonClick: () => void;
}[];
display: boolean;
};



component.tsx
const [profileInputs, setProfileInputs] = useState();

useEffect(() => {
const setFormData = async () => {
if (!profileData) return;
const inputs = await inputsItems();

setProfileInputs({
personal: [
...inputs.personalSettings.map(({ label, name }) => ({
label,
name,
activeEdit: false,
value: profileData[name],
onActionButtonClick: () => console.log("asd"),
})),
],
display: false,
});
};

setFormData();
}, [profileData]);



This code give me no error from ts or eslint, but when i delete name and add dummy value, the ts dont suggest me to add name, and dont not recognize that dummy shouldn't be there.


Another error is when i change onActionButtonClick: (testing: string) => void in type there is no error when no change in onActionButtonClick: () => console.log("asd")


Please see image on link belowa


Why no error? doesn't suggest 'name'? IMAGE

https://i.stack.imgur.com/ppIAv.png />

tsconfig
{
"compilerOptions": {
"baseUrl": ".",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": false,
"strict": true,
"noEmit": true,
"target": "ES2015",
"esModuleInterop": true,
"module": "esnext",
"strictPropertyInitialization": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"preserveConstEnums": true,
"sourceMap": true,
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"noImplicitAny": false,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/layouts/*": ["./layouts/*"],
"@/complex/*": ["./components/complex/*"],
"@/parts/*": ["./components/parts/*"],
"@/inputs/*": ["./components/inputs/*"],
"@/forms/*": ["./components/forms/*"],
"@/hooks/*": ["./hooks/*"],
"@/skeletons/*": ["./components/skeletons/*"],
"@/utils/*": ["./utils/*"],
"@/middlewares/*": ["./middlewares/*"],
"@/providers/*": ["./providers/*"],
"@/types/*": ["./types/*"],
"@/apiTypes/*": ["./app/api/_types/*"],
"@/yupSchema/*": ["./yupSchema/*"],
"@/apiYupSchema/*": ["./app/api/_yupSchema/*"],
"@/dbPrisma": ["./utils/db.ts"],
"@/formsInitialValues/*": ["./formsInitialValues/*"],
"@/wretch": ["./utils/wretch"]

}
},
"include": ["next-env.d.ts", "types/**/*.ts", "app/_types/**/*.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}



eslintrc.json
{
"env": {
"browser": true,
"es2021": true,
"jest": true
},
"extends": [
"airbnb",
"airbnb-typescript",
"eslint:recommended",
"plugin:import/typescript",
"plugin:@typescript-eslint/recommended",
"plugin:prettier/recommended",
"plugin:@tanstack/eslint-plugin-query/recommended"
],
"globals": {
"__dirname": true
},
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": "latest",
"sourceType": "module",
"project": "./tsconfig.json"

},
"plugins": [
"react",
"react-hooks",
"@typescript-eslint",
"prettier",
"@kalimahapps/eslint-plugin-tailwind"
],
"rules": {
"react/react-in-jsx-scope": ["off"],
"no-unused-vars": ["off"],
"react/jsx-uses-react": ["off"],
"react/jsx-props-no-spreading": ["off"],
"react/function-component-definition": ["off"],
"react/no-unescaped-entities": ["off"],
"react-hooks/rules-of-hooks": ["error"],
"react-hooks/exhaustive-deps": ["warn"],
"react/no-array-index-key": ["off"],
"arrow-body-style": ["error", "as-needed"],
"import/extensions": ["off"],
"import/prefer-default-export": ["off"],
"import/no-extraneous-dependencies": ["off"],
"@kalimahapps/tailwind/sort": ["warn"],
"@kalimahapps/tailwind/multiline": ["warn"],
"@typescript-eslint/no-throw-literal": ["off"],
"jsx-a11y/click-events-have-key-events": ["off"],
"jsx-a11y/no-static-element-interactions": ["off"],
"no-return-await": ["off"],
"@typescript-eslint/return-await": ["off"],
"react/button-has-type": [
"off",
{
"button": true,
"submit": true,
"reset": true
}
],
"padding-line-between-statements": [
"error",
{ "blankLine": "always", "prev": "*", "next": "return" }
]
}
}




P.S.
It's only happend when personal is array, but the error with function parameter check persist anyway.


When i do this, and testing, typescript sugges ok, but not error on function parameter
personal: {
label: string;
name: keyof TApiResponseProfile;
value: string;
activeEdit: boolean;
onActionButtonClick: (testing: string) => void;
};



Can you guys/girls cam check if tsconfig or eslint have some bug?
Ty alot for your time