Совместимость onChange TextField с Typescript

Question

Я довольно новичок в работе с Typescript и Material-UI, и у меня возникла проблема с набором текста для обработчиков событий.

У меня есть некоторые компоненты TextField, и их входные данные представляют собой шестнадцатеричные коды, которые изменят цвета CSS некоторых других компонентов в приложении. Если шестнадцатеричный код проходит проверочный тест, я отображаю обычное текстовое поле. Если это не так, я отображаю текстовое поле с ошибкой.

Вот как это выглядит в теле рендера: {this.renderHexTextField(this.state.primaryColor, 'primaryColor')}

Я следил за несколькими подобными вопросами здесь о переполнении стека и на GitHub MUI, но я получаю ошибку в своем коде.

interface IBrandingState {
primaryColor: string
secondaryColor: string
userResponseColor: string
chatBackground: string
userBoxColor: string
hoverFillColor: string
hoverFontColor: string
}

private renderHexTextField(input: string, name: string) {
// name parameter used to specify which state in handleChange function
if (this._throwHexErr(input) === 'True') {
  // If hex format is correct, render normal text field
  return (
    <TextField
      required={true}
      id="standard-required"
      margin="normal"
      name={name}
      placeholder={input}
      onChange={this.handleChange}
    />
  )
} else {
  // else render error text field
  return (
    <TextField
      error={true}
      id="standard-error"
      margin="normal"
      name={name}
      placeholder={input}
      onChange={this.handleChange}
    />
  )
 }
}    

private handleChange = (event: React.FormEvent<HTMLElement>): void => {
  this.setState({ [event.currentTarget.name]: event.currentTarget.value })
}

В VSCode я получаю сообщение об ошибке во второй строке моей функции handleChange, которая гласит:

Argument of type '{ [x: number]: any; }' is not assignable to parameter of type
'IBrandingState | ((prevState: Readonly<IBrandingState>, props: Readonly<IBrandingProps>)
=> IBrandingState | Pick<IBrandingState, "primaryColor" | "secondaryColor" | ... 4 more 
... | "hoverFontColor"> | null) | Pick<...> | null'.
 Type '{ [x: number]: any; }' is not assignable to type 'Pick<IBrandingState,
"primaryColor" | "secondaryColor" | "userResponseColor" | "chatBackground" | "userBoxColor" |
"hoverFillColor" | "hoverFontColor">'.

Property 'primaryColor' is missing in type '{ [x: number]: any; }'. [2345]"

Так что мне любопытно, откуда взялся этот { [x: number]: any; }, и, может быть, мне нужно расширить тип ввода интерфейса состояния? Мне кажется, что я правильно набрал событие в соответствии с этим предыдущим вопросом. Заранее благодарю, и если мне нужно будет предоставить больше моего кода, дайте мне знать.