Next-translate not translating when I change the language in the language switcher component

Question

I working on adding transaltion to my nextjs application. So I have installed the neccessary packages. I have also worked my Locales namespaces. I think it compiles properly this is my first time working with both nextjs and next-translate so I have only been following articles. My locales is in the root directory.

The proplem I am ecountering is that when i try to change the language in the language component i created it doesnt change the wordings of the page for example in my faqHeader component which is my first translate trial. Below is the full code of the Language switcher i created , the next.config.js file, and the mainheader component which is the parent of the lanaguage switcher because it contains the onchange handler function.

MainHeader Component

import Link from "next/link";
import mainHeaderStyles from "./main-header.module.css";
import { useState, useEffect } from "react";
import { useRouter } from "next/router";
import LanguageSwitcher from "../language-switcher/language-switcher";

export default function MainHeader() {
  const options = [
    {
      value: "en",
      label: "English",
    },
    {
      value: "de",
      label: "Deutsch",
    },
  ];
  //we store the value from the select language option in a varibale using useState
  const [selectedLanguageValue, setSelectedLanguageValue] = useState("");
  //router
  const router = useRouter();

  // onChange function for the language switcher
  const handleLanguageSelect = (event) => {
    setSelectedLanguageValue(event.target.value);
    const locale = event.target.value;
    router.push(
      {
        pathname: router.pathname,
        query: router.query,
      },
      null,
      { locale }
    );
  };

  return (
    <header className={mainHeaderStyles.header_container}>
           {/** other previous items**/}
          <li
            className={
              mainHeaderStyles.header_navigationBar_listContainer_items
            }
          >
            <LanguageSwitcher
              options={options}
              selectedLanguageValue={selectedLanguageValue}
              handleLanguageChange={handleLanguageSelect}
            />
          </li>
            {/** other items**/}
        </ul>
      </nav>
    </header>
  );
}

the language switcher component:

import { useRouter } from "next/router";
import LanguageSwitcherStyles from "./language-switcher.module.css";

export default function LanguageSwitcher(props) {
  const languageSelected = props.selectedLanguageValue;

  return (
    <div className={`${LanguageSwitcherStyles.language_select_container}`}>
      <img
        src={`../logo/${languageSelected === "en" ? "uk.png" : "deutsch.png"}`}
        className={`${LanguageSwitcherStyles.lanaguage_image}`}
      />
      <select
        name="language"
        className={` ${LanguageSwitcherStyles.language_select}`}
        onChange={props.handleLanguageChange}
        value={props.selectedLanguageValue}
      >
        {props.options.map((item, index) => {
          return (
            <option key={index} value={item.value}>
              {item.label}
            </option>
          );
        })}
      </select>
    </div>
  );
}

next.config.js file

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
};

const nextTranslate = require("next-translate-plugin");

module.exports = {
  ...nextConfig,
  ...nextTranslate(),
};

my i18n.json file

{
  "locales": ["en", "de"],
  "defaultLocale": "de",
  "pages": {
    "*": ["common"],
    "/": ["home"],
    "/about": ["about"],
    "/contact": ["contact"],
    "/faq": ["faq"],
    "/work": ["work"]
  }
}

Please what am I missing what am I doing wrong?