Reactjs load different components when onclick()

I have two kinds of components for two languages one is EN other is FA, so I decide to run them just when HTML tag, attribute lang is equal to EN or FA,i put app.js like this:

  if(document.documentElement.lang ==='fa'){
    return (
     <div>
      <Header></Header>
      <Conference></Conference>
      <Achievements></Achievements>
      <Howtoapply></Howtoapply>
      <News></News>
      <Events></Events>
      <Calendar></Calendar>
      <Overview></Overview>
      <Footer></Footer>
     </div>
  );
  }
  else{
    return (
    <div>
      <Headeren></Headeren>
      <Howtoapplyen></Howtoapplyen>
      <Foreignstudents></Foreignstudents>
      <Conferenceen></Conferenceen>
      <Achievementsen></Achievementsen>
      <Newsen></Newsen>
      <Eventsen></Eventsen>
      <Calendaren></Calendaren>
      <Overviewen></Overviewen>
      <Footeren></Footeren>
    </div>
  );
  }

} 

it’s ok, I put onclick for HTML tag attribute lang in header.js, but it’s not working i think react just load the app.js with default index.html, HTML attribute, and when header.js change it,app.js if is not work. Header.js code is:

 function changelang(){
   document.documentElement.lang='en';
 }
 return (
   <header>
   <div className='topbar'>
     <nav className="navbar navbar-expand-lg">
       <div className="container-fluid">
         <label className="topbar-lable" htmlFor=''>دسترسی سریع:</label>
         <ul className="navbar-nav me-auto mb-lg-0">
           <li className="nav-item">
             <button onclick={changelang}>EN</button>
           </li>
         </ul>
       </div>
     </nav>
   </div> ```