Fairly new to TypeScript and need to implement a toggle action between data-table and tree-view component using IBM Carbon library in React.js
Getting the following error:
‘Type ‘{ children: ReactNode; key: string; isSortable: boolean | undefined; isSortHeader: boolean; onClick: (e: MouseEvent) => void; sortDirection: DataTableSortState; }’ is not assignable to type ‘TableHeaderProps’.
Types of property ‘onClick’ are incompatible.
Type ‘(e: MouseEvent) => void’ is not assignable to type ‘MouseEventHandler’.
Types of parameters ‘e’ and ‘event’ are incompatible.
Type ‘MouseEvent<HTMLButtonElement, MouseEvent>’ is missing the following properties from type ‘MouseEvent’: layerX, layerY, offsetX, offsetY, and 16 more.’

Need some pointers on why we get the error and how to resolve/ avoid it further. Appreciate all the help I can get.

import React from 'react';
import TreeView from '@carbon/react/lib/components/TreeView/TreeView';
import TreeNode from '@carbon/react/lib/components/TreeView/TreeNode';
import { Document } from '@carbon/icons-react';
import { DataTable, Table, TableBody, TableCell, TableContainer, TableHead, TableHeader, TableRow } from '@carbon/react';
import Button from '@carbon/react/lib/components/Button/Button';

const headers = [
  { key: 'name', header: 'Name' },
  { key: 'path', header: 'Path' },
  { key: 'description', header: 'Description' },
];

const rows = [
  { id: 'node-1', name: 'Node 1', path: 'Root', description: 'Activity for Sales scenario' },
  { id: 'node-1-1', name: 'Node 1.1', path: 'Root/Node 1', description: 'Activity for Sales scenario' },
  { id: 'node-2', name: 'Node 2', path: 'Root', description: 'Activity for Sales scenario' },
  { id: 'node-3', name: 'Node 3', path: 'Root', description: 'Activity for Sales scenario' },
  { id: 'node-3-1', name: 'Node 3.1', path: 'Root/Node 3', description: 'Activity for Sales scenario' },
  { id: 'node-3-2', name: 'Node 3.2', path: 'Root/Node 3', description: 'Activity for Sales scenario' },
  { id: 'node-3-3', name: 'Node 3.3', path: 'Root/Node 3', description: 'Activity for Sales scenario' },
  { id: 'node-4', name: 'Node 4', path: 'Root', description: 'Activity for Sales scenario' },
  { id: 'node-4-1', name: 'Node 4.1', path: 'Root/Node 4', description: 'Activity for Sales scenario' },
  { id: 'node-4-2', name: 'Node 4.2', path: 'Root/Node 4', description: 'Activity for Sales scenario' },
  { id: 'node-4-2-1', name: 'Node 4.2.1', path: 'Root/Node 4/Node 4.2', description: 'Activity for Sales scenario' },
  { id: 'node-4-3', name: 'Node 4.3', path: 'Root/Node 4', description: 'Activity for Sales scenario' },
];

interface TreeNodeComponentProps {
  selectedNodes: string[];
  handleSelect: (event: { id: string }) => void;
  toggleNode3Expansion: () => void;
  isNode3Expanded: boolean;
}

const TreeNodeComponent: React.FC<TreeNodeComponentProps> = ({
  selectedNodes,
  handleSelect,
  toggleNode3Expansion,
  isNode3Expanded,
}) => {
  const [showDataTable, setShowDataTable] = React.useState<boolean>(false);

  const toggleView = () => {
    setShowDataTable(!showDataTable);
  };

  return (
    <div>
      <Button kind="secondary" onClick={toggleView}>
        {showDataTable ? 'Show Tree View' : 'Show Data Table'}
      </Button>
      {showDataTable ? (
        <DataTable rows={rows.filter(row => selectedNodes.includes(row.id))} headers={headers}>
          {({ rows, headers, getHeaderProps, getRowProps }) => (
            <TableContainer>
              <Table>
                <TableHead>
                  <TableRow>
                    {headers.map(header => (
                      <TableHeader {...getHeaderProps({ header })} key={header.key} >
                        {header.header}
                      </TableHeader>
                    ))}
                  </TableRow>
                </TableHead>
                <TableBody>
                  {rows.map(row => (
                    <TableRow {...getRowProps({ row })} key={row.id}>
                      {row.cells.map(cell => (
                        <TableCell key={cell.id}>{cell.value}</TableCell>
                      ))}
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </TableContainer>
          )}
        </DataTable>
      ) : (
        <TreeView selected={selectedNodes} onSelect={handleSelect}>
          <TreeNode id="node-1" label={<><Document /> Node 1</>} isExpanded>
            <TreeNode id="node-1-1" label="Node 1.1" />
          </TreeNode>
          <TreeNode id="node-2" label={<><Document /> Node 2</>} />
          <TreeNode id="node-3" label={<><Document /> Node 3</>} isExpanded={isNode3Expanded}>
            <TreeNode id="node-3-1" label="Node 3.1" />
            <TreeNode id="node-3-2" label="Node 3.2" />
            <TreeNode id="node-3-3" label="Node 3.3" disabled />
          </TreeNode>
          <TreeNode id="node-4" label={<><Document /> Node 4</>} isExpanded>
            <TreeNode id="node-4-1" label="Node 4.1" disabled />
            <TreeNode id="node-4-2" label="Node 4.2">
              <TreeNode id="node-4-2-1" label="Node 4.2.1" />
            </TreeNode>
            <TreeNode id="node-4-3" label="Node 4.3" disabled />
          </TreeNode>
        </TreeView>
      )}
    </div>
  );
};

export default TreeNodeComponent;