I have react application built with vite.
I lazy-load SVGs, using React.lazy & svgr

const US = React.lazy(() => import('../../assets/icons/flags/us.svg?react'));

This import returns a component I can display

<Suspense fallback={null}>
   <US />
<Suspense>

Since US is react component, which is an SVG, I want to change some of its props (HTML attributes) like width,height & fill.

When I try

US.props.width = 200

I get an error props is read only.
I tried a few things but none worked for me and I wonder if it is feasable.

What I do now, I wrap the component with a simple div and in ref i apply all the props:

<div ref={ref => ref.querySelector('svg').setAttribute('width', width)}>
   <US />
</div>

Which works but I prefer something cleaner if possible.

Thanks!