How to use React Blurhash when the width and height are dynamic?

So im using the react-blurhash package to add placeholders for my images. It expects a width and a height parameter in integers, to define the height and width of the placeholder itself. If i dont know the width and height, lets say it is dependent on the parent ( or as a percentage ) How do i use it then?

Sample Code:

<div className='sm:w-[50%] w-full flex items-center justify-center'>
                <div className="relative w-full h-full">
                    {isLoading && <Blurhash
                        hash="L5IW7%8x3@1G2,Dz.{{}BN0g}u1I"
                        width={"100%"}
                        height={"100%"}
                        resolutionX={32}
                        resolutionY={32}
                        punch={1}
                        className='absolute top-0 left-0 w-full h-full transition-opacity duration-500 rounded-lg'
                    />}
                    <img src={Rica} alt="Rica" className='rounded-lg lg:h-[500px] relative z-10 transition-opacity duration-500' onLoad={() => { setIsLoading(false) }} />
                </div>
 </div>

As seen above i have tried using “100%” but that doesnt seem to work. Anyone have any ideas?