I’m encountering an issue with language switching in my Next.js application using next-intl. When I switch the language using next-intl, the change only affects the current page and not the rest of the pages in the application. I have set up my project structure using src directory and organizing components in src/app. How can I ensure that language changes propagate across all pages consistently? Here’s a snippet of how I’m currently handling internationalization:

"use client";

import { useLocale } from "next-intl";
import { useRouter } from "next/navigation";
import { useTransition } from "react";

export default function LocalSwitcher({ arabicTitle, englishTitle }) {
  const [isPending, startTransition] = useTransition();
  const router = useRouter();
  const localActive = useLocale();

  function onSelectChange(e) {
    const nextLocale = e.target.value;
    startTransition(() => {
      router.replace(`/${nextLocale}`);
    });
  }

  return (
    <select
      defaultValue={localActive}
      onChange={onSelectChange}
      className="font-semibold cursor-pointer"
    >
      <option value="en">{arabicTitle}</option>
      <option value="ar">{englishTitle}</option>
    </select>
  );
}

it’s my first time using transition in a nextjs app so i have no idea how can i solve that problem