I want to chgange whole website page language by using react i18next and i18next, how to do it without adding in translation string of resources in ** i18n.js ** component of reactjs.

import i18n from "i18next";
import { initReactI18next } from "react-i18next";

// the translations
// (tip move them in a JSON file and import them,
// or even better, manage them separated from your code: https://react.i18next.com/guides/multiple-translation-files)
const resources = {
  en: {
    translation: {
      i18message: "Welcome to React and react-i18next",
    },
  },
  hi: {
    translation: {
      i18message: "प्रतिक्रिया और प्रतिक्रिया-i18next में आपका स्वागत है",
    },
  },
};

i18n
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    resources,
    lng: "hi", // language to use, more information here: https://www.i18next.com/overview/configuration-options#languages-namespaces-resources
    // you can use the i18n.changeLanguage function to change the language manually: https://www.i18next.com/overview/api#changelanguage
    // if you're using a language detector, do not define the lng option

    interpolation: {
      escapeValue: false, // react already safes from xss
    },
  });

export default i18n;

byusing useTranslation hook I only can hange string which is i18n.js component, but I want to change other words which are situyated in other components.

this is the div which word I want to change in hindi or any other language. It is situated in other component.

    <div className="accordion-body">
              In addition to our seamless dilevery and qaulity product ,we
              started reward point for our valuable customers when he purchase
              reward point added to his/her acount and later he/she can use
              during purchase.
            </div>