I am having an issue with React ref and class component.

My simplified code is below. We see I have a component called `Engine` which has a property `getInfo`. I do a test of `this.activeElement &&` which means it is not `null` so it must be a `React.ReactElement<Engine>`. However Typescript compiler fails with error that this does not have property `getInfo` as seen in screenshot below.

```
class Engine extends React.Component {
    getInfo(count: number): void {
        console.log('info count:', count);
    }
}

class Wizard extends React.Component {
    activeElement: null | React.ReactElement<Engine>

    topLevelGetInfo(): void {
        this.activeElement && this.activeElement.getInfo(10);
    }

    handleRef = (el: null | React.ReactElement<Engine>) => this.activeElement = el;

    render() {
        return (
            <div>
                <Engine ref={this.handleRef} />
            </div>
        )
    }
}

```

My tsconfig.json:

```
{
  "compilerOptions": {
    "module": "es6",
    "target": "es6",
    "sourceMap": true,
    "jsx": "react",
    "baseUrl": "src",
    "strict": true,
    "lib": ["dom", "es2017"],
    "moduleResolution": "node",
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true
  },
  "exclude": [
    "node_modules",
    "build",
    "build_test"
  ]
}

```

[![enter image description here](https://i.stack.imgur.com/ftSo6.png)](https://i.stack.imgur.com/ftSo6.png)