how to display grouped header in muidatatable in react js

Question

enter image description here

as shown in the above image i want to display it in a muidatatable with grouped header

i tried this below code but i didn't get proper table with grouped header it shows only the headers not to the grouped headers

const columns=[
    {
      name: 'Name',
      headerCellProps: {
        style: {
          textAlign: 'center',
          border: 0,
          background: blue[500],
        },
      },
      columns: [
        {
          name: 'firstName',
          header: 'First Name',
        },
        {
          name: 'lastName',
          header: 'Last Name',
        },
      ],
    },
    {
      name: 'age',
      header: 'Age',
      headerCellProps: {
        style: {
          background: orange[500],
        },
      },
    },
    {
      name: 'Job',
      headerCellProps: {
        style: { textAlign: 'center', border: 0, background: purple[500] },
      },
      columns: [
        {
          name: 'jobTitle',
          header: 'Title',
        },
        {
          name: 'jobArea',
          header: 'Area',
        },
      ],
    },
  ]

Answer 1

 const columns = [
     
        
        {
            name: 'Health & Safety',
            // label:'Manual Handling',
            options: {
                filter: true,
                customHeadRender: (tableMeta,value) => 
                (<>
                   <th className={classes.thhead} >
                      <th className={classes.thsubhead} >
                      <span className={classes.headSpan} >Health & Safety</span>
                    {EMP.filter( item => item.TrainingCategory === 'Health & Safety').map((EMPLOYE)=>{
                      
                            return(
                               <th style={{border:"0px",paddingLeft:"0px",paddingTop:"0px",paddingBottom:"0px"}} >
                             {/* <span className={classes.headSpan} >Health & Safety</span> */}
                             <th className={classes.headvalueOne}  >
                             {EMPLOYE.TrainingName}
                             </th>
                           </th>
                            )
                          })
                       }
                    </th>
              </th>
                         
                    
                </>),
                customBodyRender: (value) => (
                  <td className={classes.tdHead}>
                      <td className={classes.tdsubHead} >
                      { EMP? 
                            EMP.map((EMPLOYE)=>{
                            return(
                              <td className={classes.TablevalueOne} >{EMPLOYE.JobTitileNumber}</td>
                            )
                          }):null}
                    </td>
                </td>
              ),
            }
        },
     
 },

    ];