i have a signup form in jsx i want to take image as an input and upload the image in cloudinary and the url should be stored in the useState hook but image is stored in cloudinary but ui is going blank after that

{loading && <p>Uploading image...</p>}
                            {signup.picture && !loading ? (
                                    <p>Uploaded Image Preview:</p>
                                    <Image cloudName="my_cloud_name" publicId={signup.picture} width="100" height="100" crop="fill" />
                            ): null} {!loading && !signup.picture && (
                                  <p>Error loading image. Please try again.</p>

i am expecting that ui should show that image is uploaded