Gutenberg customized block: RichText underline button

I’m engaged on a customized block for Gutenberg and a part of this block is a RichText part. I’m making an attempt so as to add a button that underlines the textual content and I can’t make it work since final evening. The code I’ve 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.take a look at}
                  worth={ content material }
                  formattingControls={[]}
                  onChange={ ( content material ) => { this.props.setAttributes( { content material } ) } }
              />
            </div>

Are you able to assist me on working this factor out?