Issues in uploading Images to cloudnary with KeystoneJS, Graphql & Next JS

I am working on build an app which uploads some images to cloudnary. I am using Keystone JS + Graphql and Next JS as the front end. When i try to upload an image i always get

"Promise rejected with value: { message: 'Invalid image file', name: 'Error', http_code: 400 }"

Keystone JS : https://keystonejs.com/docs/apis/fields#cloudinary-image

Here is a small section of code.

         const fileToBlob = async (file) => new Blob([new Uint8Array(await file.arrayBuffer())], {type: file.type });

         const client = new ApolloClient({
           cache: new InMemoryCache(),
           link: createUploadLink({ uri: uri })
         });

         const { data } = client.mutate({
           mutation: gql `
               mutation updateUser($email: String, $file: Upload){
                 updateUser(where:{email: $email} data:{profilePicture: $file}){
                   id
                 }
               }
           `,
           variables: {
             email: emailAddress,
             file: new File([fileToBlob],"1",{ type: "image/jpg"})
           }
         })
         console.log("data here : " + data)
  
     }```