Hi, so I am using the ElevenLabs API and need help with storing state that I converted into audio by using buffer into an audio element. I am trying to convert text written by the end user into an audio file.

I will show the console log of what I get but the audio element where audio gets played isn't working. I am getting a 200 status response back and the payload is working and its being received by ElevenLabs API. I feel like the problem is the way I am converting the data.

Any help would be appreciated.
This file is the frontend making a call to the backend.

"use client";

import { useEffect, useState } from "react";
import axios from "axios";
import { useRouter } from "next/navigation";

const VoicePage = () => {
  const [message, setMessage] = useState("");
  const [voice, setVoice] = useState("");
  const router = useRouter();

  const handleMessage = async (e: any) => {
    try {
      e.preventDefault();

      const response = await axios.post("/api/voice", {
        text: message,
      });

      let buffer = await (await new Blob([response.data])).arrayBuffer();
      buffer = Buffer.from(buffer);

      const base64String = buffer.toString("base64");
      const data = `data:audio/mpeg;base64,${base64String}`;
          setVoice(data)
      
    } catch (error) {
      console.log(error);
    } finally {
      router.refresh();
      
    }
  };
   console.log("voice", voice)

  
  return (
    <> 
      <form onSubmit={handleMessage}>
        <label>Message Here</label>
        <input
        className="border border-1 p-2 bg-gray-50"
          type="text"
          value={message}
          onChange={(e) => setMessage(e.target.value)}
        />
        <button type="submit">Send</button>
      </form>
      
  <audio controls>
    <source src={voice} type="audio/mpeg" />
  </audio>
    </>
  );
};

export default VoicePage;

API Route had to take screenshot of.