Astro JS with astro@i18next at Cannot read properties of undefined (reading ‘map’) at supportedLanguages.map

I am using Astro js With astro-i18next
I have correctly integrated at astro.config

import astroI18next from "astro-i18next";

// https://astro.build/config
export default defineConfig({
  integrations: [ tailwind(), 
    astroI18next(),
   ],
   output: 'server',
   adapter: vercel(),
});


//astro-i18next.config.mjs

/** @type {import('astro-i18next').AstroI18nextConfig} */
export default {
    defaultLocale: "en",
    locales: ["en", "zh-CN"],
    backend: {
        loadPath: "/locales/{{lng}}/{{ns}}.json", // Ensure this matches your file structure
      },
  }

I have prepared my Json file for both language & generated the page
& I am trying to import HeadHrefLangs component in my layout file

//Layout.astro

import i18next, { t } from "i18next";
import { HeadHrefLangs } from "astro-i18next/components";

<!doctype html>
<html lang={i18next.language}>
  <head>
    <meta charset="UTF-8" />
    <meta name="description" content={description} />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="generator" content={Astro.generator} />
    <title>{title}</title>
    <HeadHrefLangs />
  </head>

but getting this error

the error
Cannot read properties of undefined (reading ‘map’)
at supportedLanguages.map((supportedLanguage) => (


components/HeadHrefLangs.astro:10:19
---
import i18next from "i18next";
import { localizeUrl } from "../..";

const supportedLanguages = i18next.languages;
const currentUrl = Astro.url.href;
---

{
  supportedLanguages.map((supportedLanguage) => (

    <link
      rel="alternate"
      hreflang={supportedLanguage}
      href={localizeUrl(currentUrl, supportedLanguage)}
    />
  ))
}