The audioUrl received is empty

[L0o0p]

Describe the bug Following the documentation process, I was able to successfully send the request, but the audioinfo.audioUrl returned was empty, which I was confused about. And thanks for the experts for being tolerant of newcomers

To Reproduce

here is my code

import { useState } from 'react';
import axios from 'axios';
import { useCurrentAudio } from '../store';

interface AudioInfo {
     id: string;
     status: string;
     audio_url: string;
}
function AudioGenerator() {
     const [prompt, setPrompt] = useState<string>('');
     const [audioInfo, setAudioInfo] = useState<AudioInfo | null>(null);
     const [loading, setLoading] = useState<boolean>(false);
     const { setCurrentAudioUrl } = useCurrentAudio();

     const baseUrl = "http://localhost:3000";

     const handleGenerateAudio = async () => {
         setLoading(true);
         try {
             const response = await axios.post(`${baseUrl}/api/generate`, {
                 prompt: prompt,
                 make_instrumental: false,
                 wait_audio: false
             }, {
                 headers: { "Content-Type": "application/json" }
             });

             console.log(response.data);

             if (response.data.status === "processing") {
                 const intervalId = setInterval(async () => {
                     const checkResponse = await axios.get(`${baseUrl}/api/get?ids=${response.data.id}`);
                     if (checkResponse.data.status !== "processing") {
                         clearInterval(intervalId);
                         updateAudioInfo(checkResponse.data);
                     }
                 }, 5000);
             }
             else {
                 updateAudioInfo(response.data);
             }
         } catch (error) {
             console.error('Error generating audio:', error);
             alert('Failed to generate audio. Check console for more details.');
         }
         setLoading(false);
     };

     const updateAudioInfo = (data: AudioInfo) => {
         setAudioInfo(data);
         if (!data.audio_url) { console.log('No available audioUrl received') }
         const newUrl = data.audio_url;
         setCurrentAudioUrl(newUrl);
         console.log(newUrl);
     };

     return (
         <div>
             <h1>Audio Generator</h1>
             <textarea
                 value={prompt}
                 onChange={e => setPrompt(e.target.value)}
                 placeholder="Enter description..."
                 style={{ resize: 'none', width: '300px', height: '100px' }}
             />
             <button onClick={handleGenerateAudio} disabled={loading}>
                 {loading ? 'Generating...' : 'Generating audio'}
             </button>
             {audioInfo && (
                 <div>
                     <h2>Audio information</h2>
                     <p>ID: {audioInfo.id}</p>
                     <p>Status: {audioInfo.status}</p>
                     <p>URL: {audioInfo.audio_url}</p>
                 </div>
             )}
         </div>
     );
}

export default AudioGenerator;

Expected behavior maybe the useful url should be return here

Screenshots here is the console.log:

Desktop (please complete the following information):

• OS: [macOS]
• Browser [chrome]
• Version [e.g. 22]