Am just exploring react with carbon and got stuck with some trigger event. Here is my piece of code (ChildComponent)

<DataTable rows={rows} headers={headers} size='tall' zebra>
      {({ rows, headers, getTableProps, getHeaderProps, getRowProps }) => (
        <Table {...getTableProps()}>
          <TableHead>
            <TableRow>
              {headers.map((header, i) => (
                <TableHeader key={i} {...getHeaderProps({ header })}>
                  <React.Fragment>{header.header}</React.Fragment>
                </TableHeader>
              ))}
            </TableRow>
          </TableHead>
          <TableBody>
            {rows.map((row, j) => (
              <div key={row.id}>
                <TableRow key={row.package} {...getRowProps({ row })}>
                  <>
                    {row.cells.map((cell) => (
                      <>
                        <TableCell key={cell.id}>{cell.value}</TableCell>
                      </>
                    ))}
                    <Button color='primary' id={row.package} onClick={this.props.redirectToDesigner(row.package)}>
                      Open
                    </Button>
                  </>
                </TableRow>
                <br />
              </div>
            ))}
          </TableBody>
        </Table>
      )}
    </DataTable>

THis lies on child component and Parent component looks like below

import React from "react";
import ChildComponent from "./ChildComponent";

class ParentComponent extends React.Component {
  redirectToDesigner = (id) => {
    alert(1);
    console.log("TRYYYY", id);
  };
  render() {
    return <ChildComponent redirectToDesigner={this.redirectToDesigner} />;
  }
}
export default ParentComponent;

Am getting the alert and the console as undefined for some reason

Here you can see one onclick event , its triggering but am not getting value(row.id) from it. I need the value for further development.

Any help/fiddle will be highly helpful