I get empty object when I save moralis.object with file

I want to set a profile photo / upload file to my object but it returns empty object
I am using this hook useMoralisFile()
here is my function

  async function saveO(){
    const MonsterCreat = new Moralis.Object.extend('AllMonsters')
    const allMonster = new MonsterCreat();

    allMonster.set("health", 34)
    allMonster.set('name',"Abdul")
    allMonster.set("rank", " grade 10")
     const name = "profile_picture.jpg"
     const profilePicture = saveFile(name, fileToUpload)
     allMonster.set("profilePic", profilePicture)
   

    await allMonster.save()
    
    .then((allMonster) =>{
      alert('you have  created  new  usrname' + allMonster.id)
      console.log(allMonster)
    },
    (error) =>{
      alert(error.message)
    })
  }

Browser console

But When I use Vanilla Moralis it works

i replaced
saveFile moralis Hook

const moralisFile  = saveFile("batman.jpeg", fileToUpload);
  allMonster.set("profilePic", moralisFile)

to vanilla

 const moralisFile = new Moralis.File("photo.jpg", fileToUpload);
     allMonster.set("userProfile", moralisFile)

saveFileHook returns empty object

**vanilla returns file **

image

what I am wrong with using SaveFile

you could try to check what it returns