React useTranslation alternative in Class Component

I am a total beginner in React (as I am in StackOverflow, sorry if the form of my post isn't quite right)

I have this SPA app that translates my content from french to english and back, works perfectly fine, but I would like to add an "active" className to my language toggle buttons so I can underline the active language in css, and what I found I had to do was dealing with the state of the component. Now I use a function component with useTranslation, and if I try and convert my function component to a class component, it says useTranslation can't be used in a class component.

Could any of you help me re-write my component so I can make it a class component and use a constructor and deal with the states, but still use the same hooks and functions I'm using now for translation?

I found previous aswers using withTranslation wrapper, but no example that would take my toggle buttons and changeLanguage function for navigation into account, just for {t} plain strings, so I'im a bit lost on how to write this correctly...

Here is my app code as a function component:

import React, { Component } from "react";
import {
  Route,
  NavLink,
  HashRouter
} from "react-router-dom";
import Home from "./Home";
import Projets from "./Projets";
import Contact from "./Contact";
import Design from "./Design";
import Web from "./Web";
import ReactDOM from "react-dom";
import { useTranslation, Trans } from "react-i18next";

export default function App() {
  const { t, i18n } = useTranslation();

  const changeLanguage = lng => {
    i18n.changeLanguage(lng);
  };

  return (
    <div className="App">
      <div className="App-header">
        <h1>{t("Bienvenue sur notre Blog")}</h1>
       
      </div>

      <HashRouter>
            <div className="main-container">
            <div className="navigation">
            <ul className="nav-list">
                <li className="nav-links"><NavLink exact to="/"><Trans>Accueil</Trans></NavLink></li>
                <li className="nav-links"><NavLink to="/projets"><Trans>Projets</Trans></NavLink></li>
                  <ul className="nav-sublist">
                    <li className="nav-sublinks"><NavLink to="/projets/graphisme-maquettes"><Trans>Graphisme</Trans></NavLink></li>
                    <li className="nav-sublinks"><NavLink to="/projets/web"><Trans>Web</Trans></NavLink></li>
                  </ul>
                <li className="nav-links"><NavLink to="/contact"><Trans>Contact</Trans></NavLink></li>
            </ul>
            <div class='langSelect'>
              <button onClick={() => changeLanguage("fr")} class='langBtn' value='lang'>fr</button>
              <button onClick={() => changeLanguage("en")} class='langBtn' value='lang'>en</button>
          </div>
            </div>
            <div className="content">
                <Route exact path="/" component={Home}/>
                <Route path="/projets" component={Projets}/>
                <Route path="/projets/graphisme-maquettes" component={Design}/>
                <Route path="/projets/web" component={Web}/>
                <Route path="/contact" component={Contact}/>
            </div>
            </div>
        </HashRouter>
    </div>
  );
}

And here is my i18n.js file:

import i18n from "i18next";
// import LanguageDetector from "i18next-browser-languagedetector";
import { initReactI18next } from "react-i18next";
import LanguageDetector from "i18next-browser-languagedetector";

i18n
  // .use(LanguageDetector)
  .use(initReactI18next)
  .use(LanguageDetector)
  .init({
    // we init with resources
    resources: {
      en: {
        translations: {
          Accueil:"Home",
          Projets:"Work",
          Graphisme:"Design",
          Web: "Web",
          Contact:"Contact",
          // "Projets":"Work",
          "Bienvenue sur notre Blog":"Welcome to our Blog"
          
        }
      },
      fr: {
        translations: {
          Accueil:"Accueil",
          Projets:"Projets",
          Graphisme:"Graphisme",
          Web: "Web",
          Contact:"Contact",
          // "Projets":"Projets",
          "Bienvenue sur notre Blog":"Bienvenue sur notre Blog"
        }
      }
    },
    fallbackLng: "fr",
    debug: true,

    // have a common namespace used around the full app
    ns: ["translations"],
    defaultNS: "translations",

    keySeparator: false, // we use content as keys

    interpolation: {
      escapeValue: false
    }
  });

export default i18n;

Now, what I would like to achieve is something like this:

import React, { Component } from "react";
import {
  Route,
  NavLink,
  HashRouter
} from "react-router-dom";
import Home from "./Home";
import Projets from "./Projets";
import Contact from "./Contact";
import Design from "./Design";
import Web from "./Web";
import ReactDOM from "react-dom";
import { useTranslation, Trans } from "react-i18next";

class App extends Component {

constructor(){
         super();

         this.state = {
              underline: false
         }
    }

render {
  const { t, i18n } = useTranslation(); => OBVIOULSY USE SOMETHING ELSE

  const changeLanguage = lng => {
    i18n.changeLanguage(lng);
  };                        => ADD/REMOVE THE CLASSNAME HERE AT THE SAME TIME I CHANGE LANGUAGE?

  return (
    <div className="App">
      <div className="App-header">
        <h1>{t("Bienvenue sur notre Blog")}</h1>
       
      </div>

      <HashRouter>
            <div className="main-container">
            <div className="navigation">
            <ul className="nav-list">
                <li className="nav-links"><NavLink exact to="/"><Trans>Accueil</Trans></NavLink></li>
                <li className="nav-links"><NavLink to="/projets"><Trans>Projets</Trans></NavLink></li>
                  <ul className="nav-sublist">
                    <li className="nav-sublinks"><NavLink to="/projets/graphisme-maquettes"><Trans>Graphisme</Trans></NavLink></li>
                    <li className="nav-sublinks"><NavLink to="/projets/web"><Trans>Web</Trans></NavLink></li>
                  </ul>
                <li className="nav-links"><NavLink to="/contact"><Trans>Contact</Trans></NavLink></li>
            </ul>
            <div class='langSelect'>
              <button onClick={() => changeLanguage("fr")} class='langBtn' value='lang'>fr</button>
              <button onClick={() => changeLanguage("en")} class='langBtn' value='lang'>en</button>
          </div>
            </div>
            <div className="content">
                <Route exact path="/" component={Home}/>
                <Route path="/projets" component={Projets}/>
                <Route path="/projets/graphisme-maquettes" component={Design}/>
                <Route path="/projets/web" component={Web}/>
                <Route path="/contact" component={Contact}/>
            </div>
            </div>
        </HashRouter>
    </div>
  );
}
}
export default App;

Thanks in advance, I hope you have everything your need, I really "just" need guidance in how to write all of this without changing the way it works so much, I hope it's actually doable...