In my Next.js project, I am encountering an issue when a user selects the Arabic language. Although the translation works fine and the text is correctly translated into Arabic, the layout does not switch from LTR (left-to-right) to RTL (right-to-left) as expected. Specifically, when trying to change the layout direction using the line onChangeDirection(themeDirection.RTL);, I see a red underline under this line with the error message: Property ‘RTL’ does not exist on type ‘ThemeDirection’.ts(2339). This indicates that the ‘RTL’ property is not recognized within the ‘ThemeDirection’ type, causing the layout direction change to fail.

I’ve verified that the translation files are correctly set up and that the localization function works for other languages. The issue seems to be specific to the directional change when switching to Arabic. How can I correctly implement the RTL switch to resolve this error?

Localization.tsx page code:

import useConfig from 'hooks/useConfig';

// ASSETS
import { LanguageSquare } from 'iconsax-react';

// TYPES
import { I18n, ThemeMode } from 'types/config';

// ==============================|| HEADER CONTENT - LOCALIZATION ||============================== //

const Localization = () => {
  const theme = useTheme();
  const matchesXs = useMediaQuery(theme.breakpoints.down('md'));

  const { i18n, onChangeLocalization, onChangeDirection, ThemeDirection } = useConfig();

  const anchorRef = useRef<any>(null);
  const [open, setOpen] = useState(false);
  const handleToggle = () => {
    setOpen((prevOpen) => !prevOpen);
  };

  const handleClose = (event: MouseEvent | TouchEvent) => {
    if (anchorRef.current && anchorRef.current.contains(event.target)) {
      return;
    }
    setOpen(false);
  };

  const handleListItemClick = (lang: I18n) => {
    onChangeLocalization(lang);
    onChangeDirection(ThemeDirection.RTL);
    setOpen(false);
   };

config.ts page code:

export enum ThemeDirection {
  LTR = 'ltr',
  RTL = 'rtl'
}
export type CustomizationProps = {
  fontFamily: FontFamily;
  i18n: I18n;
  miniDrawer: boolean;
  container: boolean;
  menuOrientation: MenuOrientation;
  menuCaption: boolean;
  mode: ThemeMode;
  presetColor: PresetColor;
  themeDirection: ThemeDirection;
  themeContrast: boolean;
  onChangeContainer: VoidFunction;
  onChangeLocalization: (lang: I18n) => void;
  onChangeMode: (mode: ThemeMode) => void;
  onChangePresetColor: (theme: PresetColor) => void;
  onChangeDirection: (direction: ThemeDirection) => void;
  onChangeMiniDrawer: (miniDrawer: boolean) => void;
  onChangeMenuOrientation: (menuOrientation: MenuOrientation) => void;
  onChangeMenuCaption: VoidFunction;
  onChangeFontFamily: (fontFamily: FontFamily) => void;
  onChangeContrast: VoidFunction;
};

I tried to use themeDirection istead of ThemeDirection and a red line under ThemDirecrion appear with error message: Property ‘ThemeDirection’ does not exist on type ‘CustomizationProps’.ts(2339). Can someone give solution of this issue.