Can Javascript be used to implement i18n into a data file with json format?

I implemented i18n into my app and i have a navbar data file, which is the data base for the page title and the tabs, i need to implement th i18n useTranslation(); into it and im not sure how.

here is an example of my implementation into the Navbar.js component:

import React, { useState, useEffect } from "react";
import { Link, useLocation } from "react-router-dom";
import { NavbarData } from "./NavbarData";
import { IconContext } from "react-icons";
import "./Navbar.css";
import Hamburger from "./Icons/Hamburger.svg";
import "./Icons/p_logo_color.png";
import Persona from "./Icons/Persona.svg";
import Logout from "./Icons/Logout.svg";







import { useTranslation } from 'react-i18next';








//Navbar function
function Navbar() {
  const [sidebar, setSidebar] = useState(false);
  const showSidebar = () => setSidebar(!sidebar);
  const [pageName, setPageName] = useState('Operational Overview');
  const location = useLocation();
  

  //i18n

  const { t, i18n } = useTranslation();
  const lngs = {
    en: {nativeName: 'English'},
    fr: {nativeName: 'French'}
  };
  
  

  

  const getPageTitleByUrl = (path) => {
    NavbarData.filter((navItem) => {
  
      if(navItem.path === path) {
        setPageName(navItem.title);
      }
      return (true)
    } )

  };

  const userConfigPageTitle = (path) => {
    setPageName("User Information");

  }

  

  useEffect(() => {
    if(location.pathname) {
      getPageTitleByUrl(location.pathname);
    }
  }, [location] ); 

  const handleLanguageChange = (e) => {
    i18n.changeLanguage(e.target.value);
  }
  

  return (
    <>
      <IconContext.Provider value={{ color: "undefined" }}>
        <div className="navbar">
          <Link to="#" className="menu-bars">
             <img src={Hamburger} alt="hamburger" onClick={showSidebar} />
          </Link>
          <div className="criminal-records">{t("navbar.criminalRecords")}</div> 

          <div className="pageTitle"><h1>{t(pageName)}</h1></div>

        <div className="language-component"> 
        <div>
          {Object.keys(lngs).map((lng) => (
            <button key={lng} style={{ fontWeight: i18n.resolvedLanguage === lng ? 'bold' : 'normal' }} type="submit" onClick={() => i18n.changeLanguage(lng)}>
              {lngs[lng].nativeName}
            </button>
          ))}
        </div>
       
          <select onChange={handleLanguageChange}
          value={localStorage.getItem("i18nextLng")}>
          <option value="en">English</option>
          <option value="fr">French</option>
          </select>
        
        
        

        </div>



          <Link to='userconfig' onClick={userConfigPageTitle}>
          <div><img className="userIcon" src={Persona} alt="persona" /> </div>
          <div className="userButton">User123#</div>
          </Link>
        
     
          <Link to='/' className="logout-button">
          <div className="right-side">
            <img className="logoutIcon" src={Logout} alt="persona" /> </div>
          <div className="logoutButton">{t("navbar.logout")}</div> 
          </Link>
        </div>
        <nav className={sidebar ? "nav-menu active" : "nav-menu"}>
          <ul className="nav-menu-items" onClick={showSidebar}>
        
            {NavbarData.map((item, index) => {
              return (
                <li key={index} className={item.cName}>
                  <Link to={item.path}>
        
                    <span className="navbutton-text" ><span className="navbutton-icon">{item.icon}</span>{item.title}</span>
                    
                    
                  </Link>
                  
                </li>
                
              );
            })}

          </ul>
        </nav>
      </IconContext.Provider>
    </>
  );
}

export default Navbar;

and this is the NavbarData.js:

import React from 'react'



import startpageIcon from './Icons/startpage.svg';
import performance from './Icons/performance.svg';
import fraud from './Icons/fraud.svg';
import { useTranslation } from 'react-i18next';



export const NavbarData = [
    {
        title: 'Operational Overview',
        path: '/monitoringoverview',
        icon: <img  src={startpageIcon} alt="" />,
        cName: 'nav-text'
    },
    {
        title: "Performance Quality",
        path: "/performancequality",
        icon: <img src={performance} alt="" />,
        cName: 'nav-text'
    },

    {
        title: "Fraud and Anomalies",
        path: "/fraud",
        icon: <img src={fraud} alt="" />,
        cName: 'nav-text'
    },
 
  
   
    
  


]

So i need to insert the {t()} into the title of each data tab.

how should i solve this?

Thanks in advance!