Infura client IPFS configuration, image upload, request error

Question

I'm developing an NFT generator, an error is occurring when saving the image, by the infura ipfs.

defined:1 GET https://ipfs.infura.io/ipfs/undefined 400 (Bad Request) Image

let client = ipfsHttpClient()
client  =  ipfsHttpClient ( "https://ipfs.infura.io:5001/api/v0/" )
            .connection?.setRequestProperty("Authorization", "Basic " + Base64.getEncoder()
            .encodeToString(baseAuthStr.getBytes()));

export default function CreateItem(){
    const [fileUrl, setFileUrl] = useState(null)
    const [formInput, updateFormInput] = useState({price: '', name: '', description: ''})
    

    async function onChange(e) {
        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(e){
            console.log(e)
        }
    }

    async function createItem(){
        const { name, description, price } = formInput
        if(!name || !description || !price || !fileUrl) return
        const data = JSON.stringify({
            name, description, image: fileUrl
        })

        try {
            const added = await client?.add(data)
            const url = `https://ipfs.infura.io/ipfs/${added?.path}`
            //after file is uploaded to IPFS, pass the URL to save it on Polygon
            createSale(url) 
        } catch (error) {
            console.log('Error uploading file: ', error)
        }
    }