React App - API Response Issue "string indices must be integers"

Beginners
1

Hello,
So i was successful in creating a python app using the API endpoint provided for my space running at sovitsGUI - a Hugging Face Space by RubinAudio api: /predict_1

Now i am attempting to make a webUI using react.
I worked through a bunch of errors, but stuck on "TypeError: string indices must be integers" (can be seen in logs)

I am converting my audio file to Base64 as well. Is this necessary.

Thank You!

snippet of header code from react (I’m sending values via form inputs in the html):

const VoiceTransfer = () => {
  const [target_speaker, settarget_speaker] = useState("a");
  const [audio_file, setaudio_file] = useState(null);
  const [transpose, setTranspose] = useState(0);
  const [auto_predict_f0, setauto_predict_f0] = useState(false);
  const [cluster_infer_ratio, setcluster_infer_ratio] = useState(0);
  const [noise_scale_var, setnoise_scale_var] = useState(0);
  const [f0_method_var, setf0_method_var] = useState("crepe");
  const [outputAudio, setOutputAudio] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [apiResponse, setApiResponse] = useState(null);

  const toBase64 = (file) =>
    new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => resolve(reader.result);
      reader.onerror = (error) => reject(error);
    });

    const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    setError(null);
    setApiResponse(null);

    const data = {
        api_name: "predict_1",
        data: [
          target_speaker,
          audio_file,
          transpose,
          auto_predict_f0,
          cluster_infer_ratio,
          noise_scale_var,
          f0_method_var,
        ],
      };

    try {
        const response = await axios.post("https://rubinaudio-sovitgui.hf.space/api/predict_1", data, {
          headers: {
            "Content-Type": "application/json",
          },
        });
        console.log("API Response:", response);
        setApiResponse(response);
        setOutputAudio(response.data);
      } catch (error) {
        console.error("Error:", error);
        setError(error.response ? error.response : error);
      } finally {
        setLoading(false);
      }
    };

here is the log output

Traceback (most recent call last):
  File "/home/user/.local/lib/python3.8/site-packages/gradio/routes.py", line 401, in run_predict
    output = await app.get_blocks().process_api(
  File "/home/user/.local/lib/python3.8/site-packages/gradio/blocks.py", line 1300, in process_api
    inputs = self.preprocess_data(fn_index, inputs, state)
  File "/home/user/.local/lib/python3.8/site-packages/gradio/blocks.py", line 1148, in preprocess_data
    processed_input.append(block.preprocess(inputs[i]))
  File "/home/user/.local/lib/python3.8/site-packages/gradio/components.py", line 2412, in preprocess
    x["name"],
TypeError: string indices must be integers
2

The word 'bump ’ is actually an acronym for the phrase 'bring up my post '.