React Edit Table

I am trying to edit a single row but edit all rows, also still trying to add a drop down that will populate some rows, any advice or info will be appreciated.

Here is the code I am using,

<TableBody>
    {item.userBankAccount.map((item, index) => {
        return (
            <TableRow hover key={index}>
                {!currentlyEditing ? (
                    <TextField
                        label="bankName"
                        name="bankName"
                        onChange={(e) => this.onChangeUserBankAccount(e, index)}
                        type="text"
                        value={item.bankName || ''}
                    />
                ) : (
                    <TableCell>{item.bankName}</TableCell>
                )}

                {!currentlyEditing ? (
                    <TextField
                        label="BankAddress"
                        name="bankAddress"
                        onChange={(e) => this.onChangeUserBankAccount(e, index)}
                        type="text"
                        value={item.bankAddress || ''}
                    />
                ) : (
                    <TableCell>{item.bankAddress}</TableCell>
                )}

                {!currentlyEditing ? (
                    <TextField
                        label="bankSwift"
                        name="bankSwift"
                        onChange={(e) => this.onChangeUserBankAccount(e, index)}
                        type="text"
                        value={item.bankSwift || ''}
                    />
                ) : (
                    <TableCell>{item.bankSwift}</TableCell>
                )}
            </TableRow>
        );
    })}
</TableBody>