React Table Add Row Dynamically

<!DOCTYPE html>
<html>

<body>
    <div id="app"></div>
    <script type="text/babel" data-presets="env,react">
        const { useState, useEffect, useRef } = React;

function App() {
            const [tableRows, setTableRows] = useState(["Row 1"]);
            const [counter, setCounter] = useState(1);

function addRow() {
                setCounter(counter + 1);
                setTableRows([...tableRows, `Row ${counter + 1}`]);
            }

return (
                <div className="container">
                    <h3>Add Table Row Dynamically in React Js</h3>
                    <button onClick={addRow}>Add Row</button>
                    <br />
                    <table>
                        <thead>
                            <tr>
                                <th>Row Number</th>
                                <th>Email</th>
                                <th>Address</th>
                            </tr>
                        </thead>
                        <tbody>
                            {tableRows.map((tableData, index) => (
                                <tr key={index} id={index}>
                                    <td>{tableData}</td>
                                    <td>
                                        <input type="email" />
                                    </td>
                                    <td>
                                        <input type="text" />
                                    </td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                </div>
            );
        }

ReactDOM.render(<App />, document.getElementById("app"));
    </script>

h3 {
            font-size: 18px;
        }

button {
            margin-bottom: 10px;
            padding: 5px 10px;
            background-color: #337ab7;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

thead {
            background-color: #f5f5f5;
        }

th,
        td {
            padding: 8px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

input {
            padding: 5px;
            border-radius: 4px;
            border: 1px solid #ccc;
        }
    </style>
</body>

</html>