Can't enter text in URLInputButton (Gutenberg)

Question

I'm using the URLInputButton component in Gutenberg, but can't get it to accept any text (nothing happens upon typing), even though I'm following the documentation on the package's github to a T.

For the record, the URLInput on its own works fine, but the one being brought in by the button doesn't for whatever reason.

const { InnerBlocks, URLInputButton, URLInput } = wp.blockEditor;
const { Component, Fragment } = wp.element;
const { __ } = wp.i18n;

const TemplateImg = [
    [ 'core/image' ],
    [ 'core/heading' ],
    [ 'core/paragraph' ],
];

class EditLinkImage extends Component {
    constructor() {
        super(...arguments);
        this.render = this.render.bind(this);   
    }

    render() {
        const {
            className,
            attributes: { btnUrl, btnText },
            setAttributes
        } = this.props;

        const onSelectURL = ( url, post ) => {
            setAttributes( {
                btnUrl: url,
                btnText: (post && post.title) || 'Click here'
            } );
        };
        return (
            <Fragment>
                <label>Choose a Link</label>
                <URLInputButton
                    onChange={ onSelectURL }
                    value='asdfasd'
                />
                <div className="feat-link">
                    <InnerBlocks 
                        template={TemplateImg}
                        templateLock="all"
                    />
                </div>
            </Fragment>
        );
    }
}

export default EditLinkImage;```

Answer 1

You have to set the value property of the URLInputButton to value={ btnUrl }. If you want to know more, read the React Form Documentation.

Answer 2

Found the answer! Unlike the URLInput component, URLInputButton is supposed to take a 'url' attribute, not 'value'.