Почему мой блок сохраняет только предыдущее состояние, а не текущее?

Я заблокировал новый редактор wordpress и застрял. Все работает нормально, кроме тех случаев, когда я сохраняю свою страницу. Публикуется блок, но в предыдущем состоянии.

Пример: если я сосредоточусь на редактируемой зоне, добавляю слово и нажимаю «Опубликовать», последнее добавление не будет в полезной нагрузке. Хотя я полностью это вижу, когда регистрирую атрибуты компонентов. Если я нажму «Опубликовать» второй раз, все будет нормально.

Мне кажется, есть какое-то состояние гонки или какое-то управление состоянием, которое я делаю неправильно. Я новичок в React и Gutenberg.

Вот моя функция сохранения:

import { RichText } from '@wordpress/editor';
import classnames from 'classnames';

export default function save({ attributes }) {
    const { align, figures } = attributes;

    const className = classnames({ [ `has-text-align-${ align }` ]: align });

    return (
        <ul className={ className }>
            { figures.map( (figure, idx) => (
                <li key={ idx }>
                    <RichText.Content tagName="h6" value={ figure.number } />
                    <RichText.Content tagName="p" value={ figure.description } />
                </li>
            ) ) }
        </ul>
    );
}

и мое редактирование:

import { Component } from '@wordpress/element';
import { AlignmentToolbar, BlockControls, RichText } from '@wordpress/editor';
import { Toolbar } from '@wordpress/components';

import classnames from 'classnames';

import { normalizeEmptyRichText } from '../../utils/StringUtils';
import removeIcon from './remove-icon';

const MIN_FIGURES = 1;
const MAX_FIGURES = 4;

export default class FigureEdit extends Component {

    constructor() {
        super(...arguments);

        this.state = {};
        for(let idx = 0; idx < MAX_FIGURES; idx++){
            this.state[`figures[${idx}].number`] = '';
            this.state[`figures[${idx}].description`] = '';
        }
    }

    onNumberChange(idx, number) {
        const { attributes: { figures: figures }, setAttributes } = this.props;
        figures[idx].number = normalizeEmptyRichText(number);
        this.setState({ [`figures[${idx}].number`]: normalizeEmptyRichText(number) });
        return setAttributes({ figures });
    }

    onDescriptionChange(idx, description) {
        const { attributes: { figures: figures }, setAttributes } = this.props;
        figures[idx].description = normalizeEmptyRichText(description);
        this.setState({ [`figures[${idx}].description`]: normalizeEmptyRichText(description) });
        return setAttributes({ figures });
    }

    addFigure() {
        let figures = [...this.props.attributes.figures, {number:'', description:''}];
        this.props.setAttributes({figures});
    }

    removeFigure() {
        let figures = [...this.props.attributes.figures];
        figures.pop();
        this.resetFigureState(figures.length);
        this.props.setAttributes({figures});
    }

    resetFigureState(idx) {
        this.setState({
            [`figures[${idx}].number`]: '',
            [`figures[${idx}].description`]: ''
        });
    }

    render() {
        const {attributes, setAttributes, className} = this.props;
        const { align, figures } = attributes;

        const toolbarControls = [
            {
                icon: 'insert',
                title: 'Add a figure',
                isDisabled: this.props.attributes.figures.length >= MAX_FIGURES,
                onClick: () => this.addFigure()
            },
            {
                icon: removeIcon,
                title: 'Remove a figure',
                isDisabled: this.props.attributes.figures.length <= MIN_FIGURES,
                onClick: () => this.removeFigure()
            }
        ];

        return (
            <>
                <BlockControls>
                    <Toolbar controls={ toolbarControls } />
                    <AlignmentToolbar
                        value={ align }
                        onChange={ align=>setAttributes({align}) }
                    />
                </BlockControls>
                <ul className={ classnames(className, { [ `has-text-align-${ align }` ]: align }) }>
                    { figures.map( (figure, idx) => (
                        <li key={ idx }>
                            <RichText
                                className="figure-number"
                                formattingControls={ [ 'link' ] }
                                value={ figure.number }
                                onChange={ number => this.onNumberChange(idx, number) }
                                placeholder={ !this.state[`figures[${idx}].number`].length ? '33%' : '' }
                            />
                            <RichText
                                className="figure-description"
                                formattingControls={ [ 'link' ] }
                                value={ figure.description }
                                onChange={ description => this.onDescriptionChange(idx, description) }
                                placeholder={ !this.state[`figures[${idx}].description`].length ? 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor' : '' }
                            />
                        </li>
                    ) ) }
                </ul>
            </>
        );
    }
}