Type 'null' is not assignable to type 'HTMLInputElement' ReactJs : <p>I am trying to reference data into reactJS along with typescript. While doing this I am getting below error</p>

<pre><code>Type 'null' is not assignable to type 'HTMLInputElement'
</code></pre>

<p>Please let me know what exactly incorrect here, I used documentaiton from React
<a href="https://reactjs.org/docs/refs-and-the-dom.html" rel="noreferrer">https://reactjs.org/docs/refs-and-the-dom.html</a>
but I think I am doing something wrong here.
Below is the scope snippet</p>

<pre><code>  class Results extends React.Component&lt;{}, any&gt; {
  private textInput: HTMLInputElement;
  .......
  constructor(props: any) {
    super(props);

    this.state = { topics: [], isLoading: false };

    this.handleLogin = this.handleLogin.bind(this);
    }

     componentDidMount() {.....}

    handleLogin() {
    this.textInput.focus();
    var encodedValue = encodeURIComponent(this.textInput.value);
   .......
}

  render() {
    const {topics, isLoading} = this.state;

    if (isLoading) {
        return &lt;p&gt;Loading...&lt;/p&gt;;
    }

    return (
        &lt;div&gt;
              &lt;input ref={(thisInput) =&gt; {this.textInput = thisInput}} type="text" className="form-control" placeholder="Search"/&gt;
              &lt;div className="input-group-btn"&gt;     
                           &lt;button className="btn btn-primary" type="button" onClick={this.handleLogin}&gt;

   ...............
</code></pre>

<p>Any idea what I may be missing here?</p>
