How to detect if mobile keyboard is shown in Web?

I have been using the code below but when the keyboard is visible nothing happens. I have checked and window.screen.height is not changing.

class TestPage extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      keyboardIsShown: false,
    };
  }

  componentDidMount() {
    this.initialScreenSize = window.screen.height;

    this.keyboard = setInterval(() => {
      if (this.initialScreenSize !== window.screen.height) {
        !this.state.keyboardIsShown && this.setState({ keyboardIsShown: true });
      } else {
        this.state.keyboardIsShown && this.setState({ keyboardIsShown: false });
      }
    }, 800);
  }

  componentWillUnmount() {
    clearInterval(this.keyboard);
  }

  ...
}