Inline style with Media query in Gutenberg block - wordpress

Question

I have a custom Gutenberg block which has a media uploader in the editor and renders a div with a background image on the front end. I want to use the full image as background on desktop and the thumbnail as background on mobile. Is it possible to use the useMediaQuery hook to achieve this? Any guidance will be greatly appreciated.
Below is my code:
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>
);
},
} );

Answer 1

Solved this issue by using the tag.
<style dangerouslySetInnerHTML={ { __html: `
.background-image {background-image: url(${ props.attributes.imgUrl });}
#media (max-width: 767px) {
.background-image {background-image: url(${ props.attributes.imgMoUrl });}
}
` } }></style>