I understand those ids don't match at all and that is the error. However, I do not know how to solve this issue. I am using shadcn ui library and I feel like it may have came from that. The error is on a dynamic page route where I am passing data into. Code is down below.

const cloneVoice = async ({params}: {params: {id: string}}) => {
    const voiceID = params.id

    console.log(voiceID)
   

     const response = await fetch(`https://api.elevenlabs.io/v1/text-to-speech/${voiceID}?optimize_streaming_latency=3`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'accept': 'audio/mpeg',
          "xi-api-key": process.env.ELEVEN_LABS as string,
        },
        body: JSON.stringify({
          text: "Hi there",
          voice_settings: {
            stability: 0.8,
            similarity_boost: 0.9
          }
     })
    })

  
    let buffer = await (await response.blob()).arrayBuffer();
    buffer = Buffer.from(buffer);

    const base64String = buffer.toString('base64');
    const voice = `data:audio/mpeg;base64,${base64String}`;
  
    return voice;

  }


export default async function YourVoicesPage({params}: {params: {id: string}}) {
  console.log("params", params)
 const voice = await cloneVoice({params});

  return (
   <div>
      <h1 className="mt-20">Home</h1>
       <audio controls>
        <source src={voice} type="audio/mpeg" />
      </audio>
     
   </div>
  )
}

I do get console log of params and the params is getting passed through correctly. File name is yourvoices/[id]/page.tsx