IPFS returns 400 bad request when I try to pin a file through ipfs-http-

Question

I have the latest 59.0.0 ipfs-http-client and I have tried with multiple versions but the same problem arises. I have set up infura project, I have the Project Id, API key... also I have set up authentication headers but when i go and add the file... it takes a bit of time and then returns a Uri hash with 400 bad request marked red in. I am attaching the console log and codes.

I am using Next Js, this is the connection bit of code.

import { create as ipfsClient } from 'ipfs-http-client';

const auth =
    'Basic ' + Buffer.from(PROJECT_ID + ':' + API_KEY_SECRET).toString('base64');

    const client = ipfsClient({
    host: 'ipfs.infura.io',
    port: 5001,
    protocol: 'https',
    headers: {
        authorization: auth,
    },
});

This the bit where try and pin the file.

const file = e.target.files[0];
  
      try{
  
        const added = await client.add(
          file,
          {
            progress: (prog) => console.log(`received: ${prog}`)
          }
        )
        const url = `https://ipfs.infura.io/ipfs/${added.path}`;
  
        setFileUrl(url);
      }
      catch(error){
        console.log(error);
      }

I have tried using mutiple versions of ipfs-http-client, I even tried with old versions where I would just have to give a global uri without any authentication

ipfs-http-client@50.1.2

const client = ipfsHttpClient('https://ipfs.infura.io:5001/api/v0');

but nothing seems to be working and please forgive me I am a novice to this.