Question: the code is written using reactjs, it is supposed to manage the checkboxes such that when one is checked the previously checked category is automatically unchecked. the code works perfectly but i get these errors on my vscode terminal.

Here is my code:

import { Checkbox, FormControlLabel } from '@mui/material';
import { useReducer } from 'react';
import './App.css'

interface CheckBoxState {
  id: string;
  name: string;
  value: string;
  label: string;
  checked: boolean;
}

interface Action {
  type: string;
  index: number;
}

const initialState = \[
  {
    id: 'id1',
    name: 'Shop',
    value: 'Shop',
    label: 'Shop',
    checked: false,
  },
  {
    id: 'id2',
    name: 'Restaurants',
    label: 'Restaurants',
    value: 'Restaurants',
    checked: false,
  },
  {
    id: 'id3',
    name: 'Supermarkets',
    label: 'Supermarkets',
    value: 'Supermarkets',
    checked: false,
  },
  {
    id: 'id4',
    name: 'Groceries',
    label: 'Groceries',
    value: 'Groceries',
    checked: false,
  },
  {
    id: 'id5',
    name: 'Party',
    label: 'Party',
    value: 'Party',
    checked: false,
  },
  {
    id: 'id6',
    name: 'Pharmacy',
    label: 'Pharmacy',
    value: 'Pharmacy',
    checked: false,
  },
\];

const checkboxReducer = (state: CheckBoxState\[\] , action: Action) => {
  switch (action.type) {
    case 'check':
      const category = {...state\[action.index\], checked :!state\[action.index\].checked}//Object is possibly 'undefined'.ts(2532)
      return \[...initialState.slice(0, action.index), category, ...initialState.slice( action.index + 1)\]
    default: 
      return state;
  }
}

const Unchecked: React.FC = () => {
  return <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="24" height="24" rx="4" fill="#D0CECD"/>
<path d="M17.7235 6.98092C18.1757 6.49642 18.9351 6.47024 19.4196 6.92244C19.9041 7.37464 19.9303 8.13399 19.4781 8.61849L11.0781 17.6185C10.6393 18.0886 9.90806 18.1293 9.41985 17.7108L5.21985 14.1108C4.71666 13.6795 4.65839 12.9219 5.0897 12.4188C5.521 11.9156 6.27856 11.8573 6.78175 12.2886L10.1084 15.14L17.7235 6.98092Z" fill="#FCFCFC"/>
</svg>
}

export default function App() {
  const \[categories, dispatch\] = useReducer(checkboxReducer, initialState);//No overload matches this call.
  Overload 1 of 5, '(reducer: ReducerWithoutAction<any>, initializerArg: any, initializer?: undefined): \[any, DispatchWithoutAction\]', gave the following error.
    Argument of type '(state: CheckBoxState\[\], action: Action) => { checked: boolean; id?: string | undefined; name?: string | undefined; value?: string | undefined; label?: string | undefined; }\[\]' is not assignable to parameter of type 'ReducerWithoutAction<any>'.
  Overload 2 of 5, '(reducer: (state: CheckBoxState\[\], action: Action) => { checked: boolean; id?: string | undefined; name?: string | undefined; value?: string | undefined; label?: string | undefined; }\[\], initialState: never, initializer?: undefined): \[...\]', gave the following error.
    Argument of type '{ id: string; name: string; value: string; label: string; checked: boolean; }\[\]' is not assignable to parameter of type 'never'.ts(2769)

  
  const handleCategoryChange = (index: number) =>  {
    dispatch({index: index, type: 'check'})
  };//Expected 0 arguments, but got 1.ts(2554)
  return <div className="app">
    hello world
    <div className="checkd">
    {categories.map((category, index)=> <FormControlLabel 
        label={category.name}
        control={<Checkbox icon={<Unchecked />} checked={category.checked} onChange={()=> handleCategoryChange(index )} />}
      /> )}
      </div>
  </div>;
}` 
the code runs well on my replit @https://replit.com/@JoeNjuguna/React-TypeScript#src/App.tsx, the errors only come in plc when its running on vscode. kindly help me solve these errors][1]

link to the my code on replit