Как каскадировать компонент Gutenberg SelectControl

Question

Как я могу каскадировать компонент SelectControl в редакторе Гутенберга.

Прошу всех профессионалов помочь мне в этом. У меня 8 месяцев опыта работы с wordpress и практически нет опыта работы с ES next Javascript или React.

Мое точное требование таково: мой первый список выбора содержит мета-поля сообщений, а во втором списке выбора я хочу отображать сообщения, у которых есть мета сообщений, которые были выбраны в первом списке выбора. Я использую getEntityRecords с настраиваемым запросом для получения настраиваемых сообщений.

Все, что я хочу, - это изменить первый список выбора. Я хочу обновить параметры второго списка выбора с помощью getEntityRecords().

Вот код js:

    ( function( blocks, blockEditor, element, components, serverSideRender  ) {
    var el = element.createElement;
    var InspectorControls = blockEditor.InspectorControls;
    var SelectControl = components.SelectControl;
      
    
    blocks.registerBlockType( 'custom-blocks/news-selection', {
        title: 'News (selection)',
        icon: 'universal-access-alt',
        category: 'custom-blocks',
        example: {
            attributes: {
                posts_per_page: 3
            },
    },


    edit: function( props ) {

        var options_news =  new Array();     
       
        if (props.isSelected) {

            var options_page_group = [];
    
            var page_query = {
                per_page: -1,
                parent: 0,
                orderby: 'menu_order',
                order: 'asc',
                status: 'publish,future,draft,pending,private',
            };

            (wp.data.select('core').getEntityRecords('postType', 'page', page_query)).forEach((post) => { 
                options_page_group.push({value:post.id, label:post.title.rendered});
            });

            function make_request_for_news(pgrp_id){

                props.setAttributes({news_1_id: null}); 

                var news_query = {
                    per_page: 10,
                    orderby: 'publication_date',
                    order: 'desc',
                    meta_key: 'news_page_group',
                    meta_value: pgrp_id
                };

                let p = new Promise((resolve, reject) => {
                    let news = (wp.data.select('core').getEntityRecords('postType', 'news', news_query));

                    if (news!== null) {
                        console.log('got the response');
                        resolve(news);
                    } else {
                        reject('noooo');
                    }
                });

                p.then((resp)=> {
                    populate_news_select_list(resp);
                }).catch((resp) => {
                    console.log(resp);
                });


            }


            function populate_news_select_list(resp){
                /*Here I am getting the response but from here how can I set these as options of the selectcontrol component*/
                resp.forEach(post => {
                    options_news.push({value:post.id, label:post.title.rendered});
                });



            }
            
                      

        return [ //Inspector control element
                el(InspectorControls,
                    {key: "inspector"},

                    el( SelectControl,
                        {
                            label: js_ref_obj.page_group_selection,
                            options : [{ value: -1, label: '-Select-' }].concat(options_page_group),
                            onChange: function( content ) {
                                props.setAttributes({page_group_id: content}); 
                                if (content > 0) {
                                    make_request_for_news(content);
                                }
                            },
                            value: props.attributes.page_group_id,
                        }
                    ),
                    el( "div",
                        {style : {display : props.attributes.page_group_id>0 ? "block" : "none" }},
                        el( SelectControl,
                            {
                                label: js_ref_obj.news_selection + ' 1',
                                options : [{ value: null, label: '-Select-' }].concat(options_news),
                                onChange: function( content ) {
                                    props.setAttributes({news_1_id: content}); 
                                },
                                value: props.attributes.news_1_id,
                            }
                        )
                    ),
                    
                    
                ),
                el(serverSideRender,
                    {key: "editable",
                        block: "custom-blocks/news-selection",
                        attributes: props.attributes
                    }
                )
                    
            ];
        }

        else {
            
            return [
                //serverSideRender element for live state preview.
                    el(serverSideRender,
                        {key: "editable",
                            block: "custom-blocks/news-selection",
                            attributes: props.attributes
                        }
                    )
            ];
        }
       
    

    },

    save: function( props ) {
        return null;

    },
} );
}(
    window.wp.blocks,
    window.wp.blockEditor,
    window.wp.element,
    window.wp.components,
    window.wp.serverSideRender
) );

Любая помощь будет оценена по достоинству. Благодаря!