Error internationalizing a react jhipster app (resource not found :9000/i18n/de.json?_=ec3c1ea9a5a8fd2043ce89c304a07566:1)

I have created the a JHipster react app (monolithic - supports multiple languages En - Ar), and tried later to install German by following the steps mentioned here.

I am facing the following error in chrome console: GET http://localhost:9000/i18n/de.json?_=c6175d5ef7eefd083a22cc4c402c57a1 404 (Not Found).

I have created the files src\main\webapp\i18n\en.., and the same for ar and de, and on the server side: src/main/resources/i18n/messages_en.properties and (ar and de) files. But till now found no place to switch languages in the ui, so I tried modifying the following files to be as follows:

dayjs.ts (initial state):

import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';
import duration from 'dayjs/plugin/duration';
import relativeTime from 'dayjs/plugin/relativeTime';

// jhipster-needle-i18n-language-dayjs-imports - JHipster will import languages from dayjs here
import 'dayjs/locale/en';
import 'dayjs/locale/ar';
import 'dayjs/locale/de';

// DAYJS CONFIGURATION
dayjs.extend(customParseFormat);
dayjs.extend(duration);
dayjs.extend(relativeTime);

locale.ts:

import axios from 'axios';
import dayjs from 'dayjs';
import { createSlice } from '@reduxjs/toolkit';

import { AppThunk } from 'app/config/store';
import { TranslatorContext } from 'react-jhipster';

const initialState = {
  currentLocale: 'ar',
};

export type LocaleState = Readonly<typeof initialState>;

export const setLocale: (locale: string) => AppThunk = locale => async dispatch => {
  if (!Object.keys(TranslatorContext.context.translations).includes(locale)) {
    const response = await axios.get(`i18n/${locale}.json?_=${I18N_HASH}`, { baseURL: '' });
    TranslatorContext.registerTranslations(locale, response.data);
  }
  dispatch(updateLocale(locale));
};

export const LocaleSlice = createSlice({
  name: 'locale',
  initialState: initialState as LocaleState,
  reducers: {
    updateLocale(state, action) {
      const currentLocale = action.payload;
      if (state.currentLocale !== currentLocale) {
        dayjs.locale(currentLocale);
        TranslatorContext.setLocale(currentLocale);
      }
      state.currentLocale = currentLocale;
    },
  },
});

export const { updateLocale } = LocaleSlice.actions;

// Reducer
export default LocaleSlice.reducer;

Then in the ui (header), there is a list to switch languages, on startup, the language is AR, but the app looks like the following on startups (localhost:9000):

Then cannot change language except to English for one time only.