Data is an array object. I want to render table columns dynamically according to data object. I used this same technique to generate table head its working. Is there any way to fix this issue?

const DataTable = ({data, deleteHandler, loading, tableFields}) => {

    const thead = [];
    const tbody = [];

    const [values, setValues] = useState({});

    for (const [key, value] of Object.entries(tableFields)) {
        thead.push(<td>{value}</td>);
    }

    data.map((field) => {
        for(const[key,value] of Object.entries(field)){
            tbody.push(
                <tr>
                    <td>{value}</td>
                </tr>
            );
        }
    })

    return (
        <Fragment>
            <Card className={classes.__bk_admin_card}>
                <Table borderless hover className={classes.__bk_admin_table}>
                    <thead>
                        <tr>
                            {thead}
                        </tr>
                    </thead>
                    <tbody>
                        {tbody}
                    </tbody>
                </Table>

            </Card>
        </Fragment>
    )
}