How to merge the empty header

export const Columns = [
    {
        Header:"Id",
        // accessor:'id',
        columns:[
            {
                Header:'Id1',
                accessor:'id'
            },
            {
                Header:'Id2',
                // accessor:'id'
            },
        ]
    },
    {
        Header:"First Name",
        accessor:'first_name',
        colSpan:2
    },
    {
        Header:"Last Name",
        accessor:'last_name'
    },
    {
        Header:"Email",
        accessor:'email'
    },
    {
        Header:"Gender",
        accessor:'gender'
    }
]

This logic for reder the table data using react-table liberay i need to remove the empty header above the First Name, Last Name , Email and Gender. for reference i attached an image belowenter image description here.

I tried to render the data using react table and when i have a sub column for id , i got empty headers for rest of the columns now in order to remove the empty headers what should i do.