Align a custom block button by wrapping it in div

I made my custom block button. I want wrap it in and align a button horizontally. How could you wrap it? Below code has two problems

1. It doesn’t allow to edit a text in a button
2. It doesn’t allow a button to align center

(function (element, blocks, blockEditor) {
  var el = element.createElement;
  var RichText = blockEditor.RichText;
  blocks.registerBlockType(
    'custome-namespace/button',
    {
      title: 'nice button',
      icon: 'button',
      category: 'layout',
      example: {},
      attributes: {
        text: {
          type: 'string',
          default: '',
          source: 'html',
          selector: 'button'
        },
        align: {
          type: 'string',
          default: 'center',
        }
      },
      supports: {
        align: true,
        justifyContent: true,
        alignItems: true
      },
      edit: function (props) {
        var blockProps = blockEditor.useBlockProps();
        var buttonBlock = el(
          RichText, Object.assign(blockProps, {
            onChange: function handleChange(text) {
              props.setAttributes({ text: text })
            },
            value: props.attributes.text,
            placeholder: 'Input button label',
            tagName: 'button',
            className: props.className,
          })
        );
        return el('div', blockProps, buttonBlock)
      },
      save: function (props) {
        var blockProps = blockEditor.useBlockProps.save();
        var buttonBlock = el(
          RichText.Content,
          Object.assign(blockProps, {
            value: props.attributes.text,
            tagName: 'button',
          })
        );
        return el('div', blockProps, buttonBlock)
      },
    }
  );

})(window.wp.element, window.wp.blocks, window.wp.blockEditor)

Thank you so much!