failed parsing /locales/en/translation.json with i18next and react.js

Question

I am trying to add internationalization for a personal portfolio website using the educator-js-codespace-template, but the translation.json is not loading when i start the website or change the language (the corresponding GET returns status 200 and the file contains valid json). I followed the guide at https://react.i18next.com/latest/using-with-hooks, here's the configuration i made:

Header.jsx is the only component i am using the useTranslation hook

//Header.jsx
import React from "react";
import { Trans, useTranslation } from "react-i18next";
import LanguageSelector from "./LanguageSelector";

const Header = () => {
  const { t } = useTranslation();
  return (
    <div
      style={{
        position: "fixed",
        display: "flex",
        justifyContent: "center",
        gap: "2rem",
        background: "rgba(255,255,255,0.75)",
        padding: "1rem",
        top: 0,
        width: "100%",
        zIndex: 10,
      }}
    >
      <a href="#home">{t("header.Home")}</a>
      <a href="#about">{t("header.About")}</a>
      <a href="#portfolio">{t("header.Portfolio")}</a>
      <a href="#footer">{t("header.Contact")}</a>
      <LanguageSelector />
    </div>
  );
};

export default Header;

i18n.js

//i18n.js
import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import Backend from "i18next-http-backend";
import LanguageDetector from "i18next-browser-languagedetector";

i18n
  .use(Backend) ///locales/{{lng}}/translation.json
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: "en",
    debug: true,
    detection: {
      caches: ["cookie"],
    },
  });

export default i18n;

public\locales\en\translation.json

{
  "header": {
    "Home": "Home",
    "About": "About",
    "Portfolio": "Portfolio",
    "Contact": "Contact"
  }
}

and the console output when i start the website

i18next::backendConnector: loading namespace translation for language en failed failed parsing /locales/en/translation.json to json i18next.js:13:48
i18next: languageChanged en i18next.js:13:48
i18next: initialized 
Object { debug: true, initImmediate: true, ns: (1) […], defaultNS: (1) […], fallbackLng: (1) […], fallbackNS: false, supportedLngs: false, nonExplicitSupportedLngs: false, load: "all", preload: false, … }
i18next.js:13:48
i18next::translator: missingKey en translation header.Home header.Home i18next.js:13:48
i18next::translator: missingKey en translation header.About header.About i18next.js:13:48
i18next::translator: missingKey en translation header.Portfolio header.Portfolio i18next.js:13:48
i18next::translator: missingKey en translation header.Contact header.Contact i18next.js:13:48

The expected result is that the translated text is rendered, currently, the application shows the key i pass to the t function on the Header.jsx file