Dynamic table in ReactJs use hook

I get fake api from link and i want to create tableComponent and reusable it with contextApi with createContext.
I have an interface in table component with this structure:

interface DataType {
  colName: { id: number; title: string; accessor: string; style: Object }[];
  rowData: string[];
}

actually we have context to storing server data (server response) & i have this interface structure in context:

interface res{
id: number;
name:string;
}

interface type{
loading:boolean;
data: res[];
}

my table component is:

   interface DataType {
     colName: { id: number; title: string; accessor: string; style: Object }[];
     rowData: string[];`enter code here`
   }

const TableComponent = (props: DataType) => {
  return (
    <>
      <section className="bg-white py-20 lg:py-[120px]">
        <div className="container">
          <div className="flex flex-wrap -mx-4">
            <div className="w-full px-4">
              <div className="max-w-full overflow-x-auto">
                <table className="table-auto w-full">
                  <thead>
                    <tr className="bg-primary text-center">
                      {props.colName.map((colName) => {
                        return (
                          <th
                            className="
                                  w-1/6
                                  min-w-[160px]
                                  text-lg
                                  font-semibold
                                  text-black
                                  py-4
                                  lg:py-7
                                  px-3
                                  lg:px-4
                                  border-l border-transparent
                                    "
                          >
                            {colName}
                          </th>
                        );
                      })}
                    </tr>
                  </thead>
                  <tbody>
                    {props.rowData.map((rowData: any) => {
                      return (
                        <tr
                          className="
                           text-center text-dark
                           font-medium
                           text-base
                           py-5
                           px-2
                           bg-[#F3F6FF]
                           border-b border-l border-[#E8E8E8]
                           "
                        >
                          <>
                            <td>{rowData.id}</td>
                            <td>{rowData.firstName}</td>
                            <td>{rowData.lastName}</td>
                            <td>{rowData.age}</td>
                            <td>{rowData.phone}</td>
                          </>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
};

export default TableComponent;

i need help to write context. i know we should have interface type for createContext like this:

    interface Type{
    type:string;
    payload:string;
    }

    createContext(initialstate){}