Can't upload readable stream with Pinata pinFileToIPFS() to IPFS on Nuxt.js app

I am working on a project (using Nuxt.js), I need to upload the image on IPFS.

I tried to convert the image in static directory to readablestream , but it didn't work.

Here is my code:

<script>
import '@pinata/sdk'

export default {
  methods: {
    async create() {
      const pinataSDK = require('@pinata/sdk')
      const pinata = pinataSDK(
        'MY_KEY',
        'MY_SECRET_KEY'
      )
      const file = await fetch('~/static/test.svg').then(
        (response) => response.body
      )
      const readableStreamForFile = await fetch(
        '~/static/recording-button.svg'
      ).then((response) => response.body)
      console.log(readableStreamForFile)

      pinata
        .pinFileToIPFS(readableStreamForFile)
        .then((result) => {
          // handle results here
          console.log(result)
        })
        .catch((err) => {
          // handle error here
          console.log(err)
        })
    },
  },
}
</script>

Here is error code:

TypeError: source.on is not a function
    at Function../node_modules/delayed-stream/lib/delayed_stream.js.DelayedStream.create (pinata-sdk.js?a4ab:14807:1)
    at FormData../node_modules/combined-stream/lib/combined_stream.js.CombinedStream.append (pinata-sdk.js?a4ab:3493:1)
    at FormData../node_modules/form-data/lib/form_data.js.FormData.append (pinata-sdk.js?a4ab:15501:1)
    at eval (pinata-sdk.js?a4ab:22908:1)
    at new Promise (<anonymous>)
    at pinFileToIPFS (pinata-sdk.js?a4ab:22906:1)
    at Object.client.pinFileToIPFS (pinata-sdk.js?a4ab:23783:1)
    at _callee2$ (new.vue?a8eb:144:1)
    at tryCatch (runtime.js?96cf:63:1)
    at Generator.invoke [as _invoke] (runtime.js?96cf:294:1)

Is this error that the image is not readable stream? I am still a newbie to web3 and blockchains so please help!