React Modal in Script Type

I am using react-modal to create a modality in a Typescript React setup.

This is the file for the modal:

import * as React from 'react';
import * as ReactModal from 'react-modal';

class MyModal extends React.Component<any, any> {
  constructor () {
    super();
    this.state = {
      showModal: false
    };

    this.handleOpenModal = this.handleOpenModal.bind(this);
    this.handleCloseModal = this.handleCloseModal.bind(this);
  }

  handleOpenModal () {
    this.setState({ showModal: true });
  }

  handleCloseModal () {
    this.setState({ showModal: false });
  }

  public modalState () {
    const stateRef = this.state;
    return stateRef["showModal"];
  }

  render () {
    return (
      <div>
        <button onClick={this.handleOpenModal}>Trigger Modal</button>
        <ReactModal
          isOpen={this.modalState()}
          contentLabel="Minimal Modal Example"
        >
          <button onClick={this.handleCloseModal}>Close Modal</button>
        </ReactModal>
      </div>
    );
  }
}

      

        
        
        
      

    

And this is how I use it:

import * as React from 'react';
import {UndoRedo} from './undo-redo';
import * as MyModal from './my-modal';

export class Header extends React.PureComponent<any, {}> {
  public render() {
    return (
      <header className="header">
        Header
        <UndoRedo/>
        <MyModal/>
      </header>
    );
  }
}

      

        
        
        
      

    

Here is the error I am getting:

Mistake in. /src/components/header/index.tsx(11,10): error TS2604: JSX element type "MyModal" does not have any constructs or signatures.

I looked around and didn't see anything that related to the class with the same problem. Seems like I saw based on the missing render feature. I tried to make the rendering public and it didn't help.