Gutenberg custom block: RichText underline button

I am working on a custom block for Gutenberg and part of this block is a RichText component. I am trying to add a button that underlines the text and I cannot make it work since last night. The code I have now [does not work]:

<div>
            <BlockControls
                controls={ [
                    {
                        icon: 'editor-underline',
                        title: __( 'Underline' ),
                        onClick: () => {
                          console.log(this.test.current, this)
                            this.test.current.props.onChange(toggleFormat(
                              this.test.current.props.record,
                                { type: 'core/underline' }
                            ) );
                        },
                    },
                ] }
                />
              <RichText
                  tagName="p"
                  label="Intro"
                  className={ className }
                  multiline="br"
                  ref={this.test}
                  value={ content }
                  formattingControls={[]}
                  onChange={ ( content ) => { this.props.setAttributes( { content } ) } }
              />
            </div>

Can you help me on working this thing out?