I have a challenge here in the Cloudinary image.

I have noticed that when the image is uploaded, the form on the screen is set to overflow hidden which makes hidden some parts of the screen and you cant scroll down. The image is displayed but that's the challenge I'm facing.
I thought it was only in one the apps I worked on but I was trying the same logic of using Cloudinary in another app I was developing. The same issue happened. I had created the form first before adding the logic for uploading an image.

I have tried all possible ways to consult the documentation of Cloudinary but still no answer to my query.

What do you think could be the problem??

This is the code snippet from the invoice generator app.

<div className="flex justify-between items-center">
<div className="flex items-center justify-between">
{logoUrl ? (
<CldImage
width="240"
height="240"
src={logoUrl}
alt="Invoice logo"
/>
) : (
<CldUploadButton
className="flex flex-col items-center justify-center w-48 h-24 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100 text-sm text-gray-500"
onUpload={(data) => {
setLogoUrl(data.info.secure_url);
}}
uploadPreset="InvoicePreset"
/>
)}
</div>

I need some help on this issue