反応tsコンポーネントでの定数の宣言エラー

React JSで書かれたReact JSで書かれたオンラインで見つけた検索バーのCSSコントロールをReact TSに変換しようとしましたが、TSには新しいものであり、最後の問題の行で何を検索して何が間違っているのかを知るのに苦労しています。

エラーは const { inputValue } = this.state; にあります行とメッセージは

Type 'Readonly<{}>' has no property 'inputValue' and no string index signature.

私の制御コード

import * as React from 'react';
import './App.css';
class ControlBar extends React.Component {
    constructor(props: any) {
        super(props);
        this.state = {
          inputValue: ''
        };
        this.onInputChange = this.onInputChange.bind(this);
      }
    onInputChange(e: any) {
        const { value } = e.target;
        this.setState({
          inputValue: value
        });
      }
    public render() {
         const { inputValue } = this.state;
        return (<div className='input-wrapper'>
            <input
              placeholder='Search...'
              value={inputValue}
              spellCheck={false}
              />
            <span className='input-highlight'>
            { inputValue.replace(/ /g, "\u00a0") }
          </span>  
          </div>);

  }
}
export default ControlBar;