React Error (TypeError): Can't add property context, object is not extensible

I'm trying to use react-clipboard inside a react component to allow a user to easily copy-paste some text into clipboard but my code isn't working. I wonder if I'm missing something obvious. Here is my code (pls ignore the boilerplate for closing the modal):

'use strict';
    import React from 'react';
    import { Modal } from 'react-bootstrap';
    import Clipboard from "react-clipboard";

    class CopyText extends React.Component {
      render() {
        let text = JSON.stringify(this.props.value, null, "  ");

        return (
          <div>
            <p>Press Cmd + C to copy:</p>
            <pre>{text}</pre>
            <Clipboard value={text} />
          </div>
          );    
      }
    }

    class CopyLinkModal extends React.Component {
      constructor(props) {
        super(props)
        this.onClick = this.onClick.bind(this);
      }
      onClick() {
        this.props.onHide();
      }
      render() {
        return (
          <Modal show={this.props.show} message={this.props.message} onHide={this.onClick}>
            <Modal.Body>
              <div className="linkMessage">
                <CopyText value={this.props.message} />
              </div>
            </Modal.Body>
            <Modal.Footer>
              <button onClick={this.onClick}>Close</button>
            </Modal.Footer>
          </Modal>
        )
      }
    }

    export default CopyLinkModal;

For the most part I'm following instruction from https://www.npmjs.com/package/react-clipboard but I'm still getting the TypeError: TypeError: Can't add property context, object is not extensible Thanks for any help.