i18next как передать в translate переменную

Всем привет.

Делаю сайт с использованием i18next.

Есть вот такой объект:

  let refrence = {
    Events: "События",
    Members: "Участники",
    News: "Новости",
    Projects: "Проекты",
    InfoStudents: "Студентам",
    HistorySuccess: "История успеха",
    Documents: "Документы",
    Forum: "Форум",
    Contacts: "Контакты",
  };

Так я его использую дальше

 <ul>
   <li>
   <img src={logo} alt="" />
   </li>
   <li>{i18next.t(refrence.Events)}</li>
   <li>{i18next.t(refrence.Members)}</li>
   <li>{i18next.t(refrence.News)}</li>
   <li>{i18next.t(refrence.Projects)}</li>
   <li>{i18next.t(refrence.InfoStudents)}</li>
   <li>{i18next.t(refrence.HistorySuccess)}</li>
   <li>{i18next.t(refrence.Documents)}</li>
   <li>{i18next.t(refrence.Forum)}</li>
   <li>{i18next.t(refrence.Contacts)}</li>
</ul>

И есть такая инициализация i18n.

i18next.init({
fallbacklng: "en",
debug: true,
resources: {
  en: {
    translation: {
      Events: "Events",
      Members: "Members",
      News: "News",
      Projects: "Projects",
      InfoStudents: "InfoStudents",
      HistorySuccess: "HistorySuccess",
      Documents: "Documents",
      Forum: "Forum",
      Contacts: "Contacts",
    },
    ru: {
      translation: {
        Events: "События",
        Members: "Участники",
        News: "Новости",
        Projects: "Проекты",
        InfoStudents: "Студентам",
        HistorySuccess: "История успеха",
        Documents: "Документы",
        Forum: "Форум",
        Contacts: "Контакты",
      },
    },
  },
},
});

Как видно из кода я хочу, чтобы бралось текстовое значение переменной и оно потом переводилось, но я не понимаю, как правильно это сделать. Подскажите направление в каком копать, замучалась уже(