Встроенный стиль с медиа-запросом в блоке Гутенберга

У меня есть настраиваемый блок Гутенберга, который имеет загрузчик мультимедиа в редакторе и отображает div с фоновым изображением на передней панели. Я хочу использовать полное изображение в качестве фона на рабочем столе и миниатюру в качестве фона на мобильном устройстве. Можно ли использовать для этого хук useMediaQuery? Будем очень признательны за любые рекомендации. Ниже мой код:

const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const { MediaUploadCheck, MediaUpload } = wp.blockEditor;
const { useMediaQuery } = wp.compose;

registerBlockType( 'blockset/test', {
    title: __( 'test' ),
    attributes: {
       imgUrl: { type: 'string', default: '' },
       imgMoUrl: { type: 'string', default: '' },
    },
    edit: (props) {
        return (
        <div className="content">
          <span>Choose a Hero Image</span>
          <MediaUploadCheck>
            <MediaUpload
              onSelect={ ( img ) => {
                props.setAttributes( {
                  imgUrl: img.url,
                  imgMoUrl: img.sizes.thumbnail.url : '',
                } );
              } }
              render={ ( { open } ) => {
                return props.attributes.imgUrl !== ''? (
                    <div className={ 'hero__preview' }>
                      <figure className={ 'image' }>
                        <img
                          src={ props.attributes.imgUrl }
                        />
                      </figure>
                      <Button
                        className={ 'hero__button' }
                        onClick={ open }
                      >
                        Select a New Image
                      </Button>
                    </div>
                  ) : (
                    <div className={ 'hero__container' }>
                      <p className={ 'hero__description' }>
                        Pick a hero image from the media library.
                      </p>
                      <Button
                        className={ 'hero__button' }
                        onClick={ open }
                      >
                        Open Media Library
                      </Button>
                    </div>
                  );
              } }
            />
          </MediaUploadCheck>
        </div>
        );
    },

    save( props ) {
        const isMobile = useMediaQuery( 'max-width:767px' )
        const imgURL = isMobile ? props.attributes.imgMoUrl : props.attributes.imgUrl
        return (
           <div
              className="background-image"
              style={ { backgroundImage: `url(${ imgURL })` } }
            ></div> 
        );
    },
} );