Editable button with RichText for Gutenberg custom block

I’m making an editable button for gutenberg editor. I wrote below code, but it doesn’t allow me to edit a text in a button. Does anybody know what’s wrong? Thank you in advance.

var el = window.wp.element.createElement;
var RichText = window.wp.blockEditor.RichText;

wp.blocks.registerBlockType( 
  'custom_namespace/button',
  {
    title: 'nice_button',
    icon: 'button',
    category: 'layout',
    example: {},
    attributes: {
      text: {
        type: 'string',
        default: '',
        source: 'html',
        selector: 'button'
      },
    },
    edit: function (props) {
      var blockProps = wp.blockEditor.useBlockProps();
      return el(
        RichText, Object.assign(blockProps, {
          onChange: function(text) {
            props.setAttributes({text: text})
          },
          value: props.attributes.text,
          placeholder: 'Input your text',
          tagName: 'button',
          className: props.className,
        })
      );
    },
    save: function (props) {
      var blockProps = wp.blockEditor.useBlockProps.save();
      return el(
        RichText.Content,
        Object.assign(blockProps, {
          value: props.attributes.text,
          tagName: 'button',
        })
      );
    },
  }
);