How to embed PDF into part of an html page for Firefox

Question

When I use iframe to embed a pdf into an html page, the pdf embeds properly when viewed in Chrome:

But in Firefox, the pdf opens in its own window instead of the same view as Chrome:

I've tried a few permutations of settings in iFrame. Here's the code I'm using for this now in ReactJS

  componentDidMount() {
    const doc = new jsPDF('p', 'pt', 'letter')

    const data = {
      title: 'lesson title',
    }

    doc.setFontSize(10);
    doc.text(50, 50, `${data.title}`)
    doc.text(50, 50 + (14 * 1), 'Subtitle')
    doc.text(50, 50 + (14 * 2), 'Required: these things...')
    doc.text(50, 50 + (14 * 3), (new Date()).toLocaleDateString())
    doc.text(50, 50 + (14 * 7), 'This PDF presents the form you just submitted')

    this.setState({
      lesson: doc.output('dataurl', null)
    })
  }


    render() {
        return (
      <div className="container-fluid h-100p">
      <header style={{margin:'50px'}}></header>
                <div className="row justify-content-center bg-white" style={{height:'inherit'}}>
                    <div className="col-sm-6">
            <div><h1>PDF Generator Test</h1></div>
            <div>BUTTON</div>
          </div>
          <div className="col-sm-6">
            <div>
              <object>
                <iframe id="pdf-test" allowfullscreen="false" windowName="PDF Test" src={this.state.lesson} style={{float:"none", display:"inline", height:"1200px"}} frameborder="0"></iframe>
              </object>
            </div>
          </div>
                </div>
            </div>
        )
    }
}

I tried wrapping in an object tag from HTML embedded PDF iframe but to no avail.

Thank you!