Problem with infura.io gateway requiring auth posting to IPFS

Question

Before Oct 2022, Infura.io allow users to post using its gateway as follows: No auth is required. My original code is as follows in ipfs.js file.

const IPFS = require('ipfs-api');
const ipfs = new IPFS({host: 'ipfs.infura.io', port: 5001, protocol: 'https'});
export default ipfs;

When auth is needed I included the following:

const projectId ='ZZZZZZZZZZZZZZz';
const projectSecret='ZXXXZZXXXXXXXXXX';
const auth = 'Bearer ' + (projectId + ':' +projectSecret);

const ipfs = new IPFS({
     host: 'ipfs.infura.io',
     //host: 'nftpatent.infura-ipfs.io/',
     port: 5001,
     protocol: 'https', 
     headers: {
     authorization: auth,
     }
});

The issue is that i am unable to upload and post/pin to IPFS. My first thought is that I use the wrong host which should be the dedicated 'nftpatent.infura-ipfs.io' as this requires the auth but from what I have read research it seems everything stays the same and we need to provide auth only.

In my App.js, I have this to do the heavy lifting

        // save document to IPFS,return its hash#, and set hash# to state
        // https://github.com/ipfs/interface-ipfs-core/blob/master/SPEC/FILES.md#add
        //setState by setting ipfsImageHash to ipfsImageHash[0].hash
        
        if (this.state.myToken.imageBuffer && this.state.myToken.imageBuffer.length > 0) {

            await ipfs.add(this.state.myToken.imageBuffer, (err, ipfsHash) => {
                console.log('IPFS hash: ' + ipfsHash + ', error: ' + err);

                let myMetadata = JSON.parse(JSON.stringify(this.state.myToken.metadataBuffer));
                myMetadata.image = this.state.web3ctx.ipfsGateway + ipfsHash[0].hash;
                  
                this.setState({
                    myToken: {
                        ...this.state.myToken,
                        ipfsImageHash: ipfsHash[0].hash,
                        
                        ipfsImageUrl: myMetadata.image,
                        metadataBuffer: myMetadata,
                        imageBuffer: ''
                    },
                    selectedTab: 'Metadata'
                });
            })
        } else if (this.state.myToken.metadataBuffer && this.state.myToken.metadataBuffer.toString().length > 0) {

            await ipfs.add(Buffer.from(JSON.stringify(this.state.myToken.metadataBuffer)), (err, ipfsHash) => {
                console.log('IPFS hash: ' + ipfsHash + ', error: ' + err);

                this.setState({
                    myToken: {
                        ...this.state.myToken,
                        ipfsMetadataHash: ipfsHash[0].hash,
                        ipfsMetadataUrl: this.state.web3ctx.ipfsGateway + ipfsHash[0].hash
                    },
                    selectedTab: 'Metadata'
                });
            })
        } else {
            console.log('file could not be found: '
                + JSON.stringify(this.state.myToken.metadataBuffer, null, 2));
            return 1;
        }
    };
`

And the error is

TypeError: Cannot read properties of undefined (reading '0') Duplex. src/App.js:287

myMetadata.image = this.state.web3ctx.ipfsGateway + ipfsHash[0].hash;

enter image description here

Please help as I can't seem to figure out the issues. ``

I tried working the auth and checking whether the host is correctly called. I believe the issue is with "auth" and not with scripts as they were working previously. Thanks in advance. `