Preview a React component in different predefined resolution

Question

Here is simple requirement, I have a React component and wanted to see its preview on different resolutions like 1920 x 1080, 1680 x 1050, 1280 x 1024 etc.

Approach taken:

Basically, I am previewing the component on an overlay. So I have calculated the height & width of whole render area and selected resolutions like 1920 for width and 1080 for height. Next I have applied this formula in parent container of component.

const scaleX = renderAreaWidth / selectedWidthFromResolution

const scaleY = renderAreaHeight / selectedHeightFromResolution ;

const transform = `scale(${scaleX > 1 ? 1 : scaleX}, ${scaleY > 1 ? 1 : scaleY})`;

And giving transform value to inline style of parent component containing component to preview. like this

<div style={{height, width, transform}}>
<ComponentToPreview/>
</div>
                    

Issue
Component is previewing fine but its not clear, its fuzzy.

Please suggest the way for this. Thanks in advance.