create a custom image size block gutenberg react not working

Using the media upload element I created a custom Gutenberg block, that includes an image upload button. When an image is selected, it should select it with an image size 160px

I want to change the size of full image to image from media with height= 160px and width=160px i add this code in functions.php

add_image_size( $name, $width, $height, $crop);
add_image_size('smaller-teaser', 160, 160, true);
add_image_size('Home bottom', 270, 90, false);
add_image_size('Archive thumb', 150, 75, false);
add_image_size('Special', 397, 224, false);
add_image_size( 'Test cropped', 500, 500, false );

function sgr_display_image_size_names_muploader( $sizes ) {

    $new_sizes = array();

    $added_sizes = get_intermediate_image_sizes();

    foreach( $added_sizes as $key => $value) {
        $new_sizes[$value] = $value;
    }

    // This preserves the labels in $sizes, and merges the two arrays
    $new_sizes = array_merge( $new_sizes, $sizes );

    return $new_sizes;
}
add_filter('image_size_names_choose', 'sgr_display_image_size_names_muploader', 11, 1);

this is my code block.jsx

    const getThumbnailUrl = (media) => {
         console.log(media);
        let sizes;
        if (media && media.sizes) {
            sizes = media.sizes;
        }
        else {
            return '';
        }
        let url;
        if (sizes !== undefined && sizes['smaller-teaser'] !== undefined) {
            url = sizes['smaller-teaser'].url;
        }
        else if (sizes !== undefined && sizes.full !== undefined) {
            url = sizes.full.url;
        }
        else {
            url = '';
        }
        return url;
    };

this is function edit

    <BlockControls>
                            <SelectControl
                                label="Image location"
                                
                                value={ attributes.imageLocation }
                                options={ [
                                    { label: 'left', value: 'left' },
                                    { label: 'right', value: 'right' },
                                ] }
                                onChange={onChangeImageLocation}
                            />
                        </BlockControls>
                    }
                    <div className={`nelga-teaser nelga-teaser--small nelga-teaser--image-${attributes.imageLocation}`}>
                        <div className='nelga-teaser__image'>
                            <MediaUploadCheck>
                                <MediaUpload
                                    onSelect={onSelectMedia}
                                    value={attributes.mediaId}
                                    allowedTypes={ ['image'] }
                                    render={({open}) => (
                                        <Button
                                            className={attributes.mediaId == 0 ? 'editor-post-featured-image__toggle' : 'editor-post-featured-image__preview'}
                                            onClick={open}
                                        >
                                            {__('Choose or change image', 'nelga')}
                                        </Button>
                                    )}
                                />
                            </MediaUploadCheck>
                            <img className="nelga-teaser__img" src={attributes.mediaUrl} />
                        </div>

I need a help please