Recursive Loop in table React JS

Is it possible to render dynamic columns and also data on column bases

I'm trying to render dynamic table columns and also its data on the basis of array in react JS.

var cols = ["Id", "Name"];
const generateData = () => {
    var testArr = [];
    for (let i = 0; i < 100; i++) {
        testArr.push({ Id: i + 1, Name: names[Math.round(Math.random() * 10)] });
    }
    return testArr;
}

import { Table } from "reactstrap";

function dynamicTables(props) {
    debugger
    return (
        <Table className="align-items-center table-flush" responsive>
            <thead className="thead-light">
                <tr>
                    {
                        props.cols.map((item, key) => (
                            <th key={key}>{item}</th>
                        ))
                    }
                </tr>
            </thead>
            <tbody>
                {
                    props.data.map((item, key) => (
                        <tr key={key}>
                            {
                                props.cols.map((col) => {
                                    <td>{item[col]}</td>
                                })
                            }
                        </tr>
                    ))
                }
            </tbody>
        </Table>
    );
}

export default dynamicTables;

Calling Component:

<dynamicTables data={generateData()} cols={cols}></dynamicTables>