I need help overlaying a Cloudinary image in another Cloudinary in React

I'm not sure why I can't figure this out, I've literally tried everything! Overlay isn't working properly for me. Here is my react code:

<Image publicId={publicId}>

<Transformation overlay="v1682478917/youdesignai/noAuthUser/qald4f8keeumoehhei3t" width="70" />

</Image>

very simple right? Here is my URL of the first image: https://res.cloudinary.com/dhygjkoey/image/upload/v1681627748/youdesignai/websiteAssets/alejokpo_a_photo_of_a_model_wearing_a_white_t-shirt._White_t-sh_bccd6d02-baf9-4408-84c0-bf0fdbcdf890.png therefore, I'm using this as my publicId: v1681627748/youdesignai/websiteAssets/alejokpo_a_photo_of_a_model_wearing_a_white_t-shirt._White_t-sh_bccd6d02-baf9-4408-84c0-bf0fdbcdf890 this works fine without any transformation. Same as my other image with URL: https://res.cloudinary.com/dhygjkoey/image/upload/v1682478917/youdesignai/noAuthUser/qald4f8keeumoehhei3t.png when I use this as the publicId: v1682478917/youdesignai/noAuthUser/qald4f8keeumoehhei3t it is displaying the image properly. The issue is when I perform a overlay transformation. I'm tring to put my second image in the middle of my first image or to atleast just be able to see one image on top of the other, but it is not working with the code you see above. I also tried just using the image id as follows:

<Image publicId={publicId}>

<Transformation overlay="qald4f8keeumoehhei3t" width="70" />

</Image>

Since it was mentioned in a forum that I dont need the other extra part. This did not solve my issue, I still get 400 error with the URL generated.

Can someone please help fix this? Or let me know if the images I'm using are not correct? it has been extremely frustrating and based on documentation, I don't see that im doing anything wrong here.