I have 2 SelectControl from a Wordpress Gutenberg Custom Block I'm trying to build. I don't use ES6. Only ES5 and no JSX. The 2 SelectControl should work in the following way:

They fetch from REST WP Api the Post Types and all the Posts. What I want to achieve is when I select an item from SelectControl 1 (Post Types) , I get the related filtered Posts in SelectControl 2. All the posts and post types are preloaded in array at page load. I'm able with the code below to successfully populate both controls with the REST Api, but when it comes to filter the second selectcontrol according the selected value from the firstcontrol it doesn't work. No errors.

onChange: function(value) {
    selectedType = value;
}

The code above doesn't sort any effect. Also no errors. Cannot figure out what is wrong here

(function(wp) {
var registerBlockType = wp.blocks.registerBlockType;
var InspectorControls = wp.blockEditor.InspectorControls;
var PanelBody = wpponents.PanelBody;
var TextControl = wpponents.TextControl;
var ColorPalette = wpponents.ColorPalette;
var SelectControl = wpponents.SelectControl;
var Dashicon = wpponents.Dashicon;
var el = wp.element.createElement;
var withState = wppose.withState;
var __ = wp.i18n.__;

var options = [{
    value: 0,
    label: __('Select a Post...')
}];
var optionsfiltered = null;
var selectedType = '';
var posttypeOptions = [{
    value: 0,
    label: __('Select a Post Type...')
}];

wp.apiFetch({
    path: '/custom/v1/all-posts'
}).then(function(posts) {
    var optionsAppend = posts.map(function(post) {
        return {
            value: post.id,
            label: post.title,
            type: post.type
        }
    });
    options = options.concat(optionsAppend);
    optionsfiltered = options;
});

wp.apiFetch({
    path: '/wp/v2/types'
}).then(function(posttypes) {
    console.log(posttypes);
    for (let [key, item] of Object.entries(posttypes)) {
        posttypeOptions.push({
            value: item.slug,
            label: item.name
        });
    }
});

function TestControl(props) {
    var attributes = props.attributes;
    var setAttributes = props.setAttributes;
    var setState = props.setState;

    var inspectorControl = el(InspectorControls, {},
        el('h4', {}, el('span', {}, "Select Value")),
        el(SelectControl, {
            label: "Select a Post Type",
            value: attributes.selectedPost,
            options: posttypeOptions,
            style: {
                fontSize: '10px'
            },
            onChange: function(value) {
                selectedType = value;
            }
        }),
        el(SelectControl, {
            label: "Select a Post",
            value: attributes.selectedPost,
            options: optionsfiltered.filter(function(el) {
                return el.type === selectedType;
            }),
            style: {
                fontSize: '10px'
            },
            onChange: function(value) {
                setAttributes({
                    url: value
                });
            }
        })
    );
    return el('div', {
            style: {
                backgroundColor: attributes.color,
                color: "#00ff00"
            }
        },
        inspectorControl
    );
}
registerBlockType('resorcedomain/resource-cards-block', {
    title: __('Resource Cards'),
    category: 'widgets',
    icon: {
        foreground: '#46aaf8',
        src: 'store'
    },
    attributes: {
        posts: {
            type: 'string',
            default: null
        },
        orders: {
            type: 'string',
            default: null
        },
        tagfilter: {
            type: 'string',
            default: null
        }
    },
    edit: withState({})(TestControl),
    save: function(props) {
        return null;
    }
});
})(window.wp);