Using Recurly payment form with React results in large blank iFrames. Styling removes fields

Recurly instructions on how to build a form

Github repository that demonstrates the problem.

My form:

<form id="recurly_form">

          <div data-recurly="number"></div>
          <div data-recurly="month"></div>
          <div data-recurly="year"></div>
          <div data-recurly="cvv"></div>
          <button onClick={this.handleFormSubmit} >
            Place order
          </button>
        </form>

I make every attempt to make sure the configure call is made after everything is mounted and ready:

componentDidMount() {
    $(() => {
      window.recurly.configure({
        publicKey: "ewr1-xxxxxxxxxxxxxxxxx"
      });
    });
  }

The end result is a tall blank screen with a button:

Markup looks like this:

Note that the month field is set to visibility:hidden. Also note that the <div data-recurly="number"></div> is empty. That is the result of me trying to style it with the styles offered in the instructions.

Please advise on what's missing.