React Internal server error: URI error on successfull api call

Im new to React and have created a Remix React app which calls a python hosted api backend to recieve a timestamp (for now).

The api call is successfull and there is full communication with the backend, however the problem is that once the data has been fetched it throws an “[vite] Internal server error: URI error”, which i cannot troubleshoot.

Step 1 -> go to http://localhost:5173/dashboards/external/AAA

Step 2 -> dashboards.external.$iata.tsx is displayed and a api call is made to my python made backend

Step 3 -> HTML is loaded but the terminal throws “[vite] Internal server error: URI error”

import { useParams } from "@remix-run/react";
import { json, LoaderFunction } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import styles from '~/styles/spinner.css';

export function links() {
  return [{ rel: "stylesheet", href: styles }];
}

type LoaderData = {
  apiData: any;
};

export const loader: LoaderFunction = async ({ request }) => {
  const url = new URL(request.url);
  const iata = encodeURIComponent(url.pathname.split('/').pop() || '');

  console.log(iata);

  const currentDate = new Date();
  const firstDayOfYear = new Date(currentDate.getFullYear(), 0, 1);
  const timezoneOffset = -currentDate.getTimezoneOffset();

  const headers = {
    "ITS-API-Key": process.env.API_KEY || "",
    "from": firstDayOfYear.toISOString(),
    "to": currentDate.toISOString(),
    "offset": timezoneOffset.toString()
  };

    let apiData = null;

    const response = await fetch("http://localhost:5000/init", {
        method: "GET",
        headers: headers
    });

    const responseData = await response.text();

    if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
    }

    apiData = JSON.parse(responseData);

  return json({ apiData});
};

function LoadingSpinner() {
    return (
      <div className="spinner">
        Loading...
      </div>
    );
  }

export default function ExternalDashboard() {
  const { iata } = useParams();
  const { apiData } = useLoaderData<LoaderData>();

  return (
    <div>
      <h1>External Dashboard</h1>
      <p>Current airport: {iata}</p>
    </div>
  );
}

I cant see why this URI error happens in the first place and it seems to be a vite related issue, the error stack doesnt print anything useful either.