The order of hooks issue with React and I18n

Question

I am working on a small project where I created a provider to change the language from Arabic to English and vice versa. Here is how it looks:

import React from "react";
import { useSelector } from "react-redux";
import { useTranslation } from "react-i18next";

const LanguageProvider = ({ children }) => {
const lang = useSelector((state) => state.LanguageReducer);
const { i18n } = useTranslation();
React.useEffect(() => {
  if (i18n.changeLanguage) i18n.changeLanguage(lang.language);
}, [i18n, lang]);

return <div {...{ dir: lang.activeDir }}>{children}</div>;
};

export default LanguageProvider;

And I wrap my app with this provide along with the context provider. But I face this issue when the home page of the project loads and I cannot solve it so far.

React has detected a change in the order of Hooks called by LanguageProvider. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks

What could the problem be here?