Компонент таблицы React onClick в полноэкранном режиме

Я работаю над панелью инструментов, которая содержит множество визуальных элементов вместе с таблицей. Но на основе пользовательского выбора таблица может быть большой, а данные в таблице могут быть слишком маленькими для чтения. Из-за этого мне нужно сделать этот визуальный полноэкранный режим нажатием кнопки.

Также для выхода из полноэкранного режима? Как лучше всего это сделать, не усложняя код?

код:

import "./styles.css";

export default function DataTable7() {

  let totalWeeks= 10;

  const rawData = [
    [15,'','','',1,'',1,'','',5,8,7],
    [7,'','','',1,'',1,'','',5,2],
    [6,'','','','','','','',6,0],
    [3,'','','','','','',2,0],
    [2,1,'','','','',1,1],
    [2,'','','','',2,0],
    [1,'','','',1,0],
    [2,'',1,1,1],
    [2,'',1,0],
    ['-','-','-']
    ];


  const makeFullscreen = () => {
    element.requestFullscreen()
  }



  
  return (

    <>
    <div>
    <div className = "tableContainer">
    <table className = "lostAssets">

      <thead>
        <tr>
          <th>Week</th>
          

          {new Array(totalWeeks).fill(null).map((_, i) => {
              return <th>{i+1}</th>;
            })}

          <th>Win</th>
          <th>Lose</th>
        </tr>
      </thead>


      <tbody>

        {rawData.map((item, index) => {
          return (
            <>
            <tr>
              <th>{index + 1}</th>
              {[...Array(rawData[0].length - item.length)].map((item) => { 
                return <td></td>;  //for empty values
              })}
              {item.map((itm) => {
                return <td>{itm}</td>;
              })}
              
            </tr>
            
            </>
          );
        })}

      </tbody>
      
    </table>
    </div>
    <button onClick = {makeFullscreen}>
      Full Screen
    </button>
    </div>
    </>  
  );
   
}

CSS:

table, tr, td, th {
  border: 1px solid #9b9b9b;
  border-collapse: collapse;
  
  text-align: center;
  padding: .4em;
}

.tableContainer{
 
  height: 200px;
  width: 390px;
 
  overflow: scroll;
}

Table thead{
  position: sticky;
  top: 0px;
  margin: 0 0 0 0;
}