Untitled

in openDeleteModal function i want to update the deleteRecord to rowData but it is not happening. Correct th ebelow code



import React, { useEffect } from 'react';
import { withPage, usePageState, useAppState } from '@d-lift/core';
import { Page, Header, DataTable, Icon, Button, Modal, Label } from '@d-lift/uxcomponents';
import BodySection from '@/Layout/BodySection';
import './manage-team.css';
 
const ManageTeam = ({ UXPage, config }) => {
    const [teamData, setTeamData] = useAppState('teamData', []);
    const [deleteModal, setDeleteModal] = useAppState('deleteModal', false);
    const [deleteRecord, setDeleteRecord] = useAppState('deleteRecord', undefined);
 
    useEffect(() => {
        onPageLoadHandler();
    }, []);
 
    const onPageLoadHandler = () => {
        const data = [
            { name: 'abc', state: 'abc', offering: 'abc', since: 'abc' },
            { name: 'abc', state: 'abc', offering: 'abc', since: 'abc' },
            { name: 'abc', state: 'abc', offering: 'abc', since: 'abc' },
            { name: 'abc', state: 'abc', offering: 'abc', since: 'abc' },
        ];
        if (data) {
            data.map((item, index) => {
                return {
                    ...item,
                    id: index,
                };
            });
            setTeamData(data);
        }
    };
 
    const getDeleteCol = (colData, rowData) => {
        return (
            <Icon symbol="fa fa-trash text-danger" click={() => openDeleteModal(rowData)}></Icon>
        );
    };
 
    const openDeleteModal = (rowData) => {
        setDeleteRecord(rowData);
        console.log(deleteRecord, 'deleteRecord', rowData);
        setDeleteModal(true);
    };
 
    const closeDeleteModal = () => {
        setDeleteModal(false);
    };
 
    const deleteContact = () => {
        setDeleteModal(false);
    };
 
    const formatDeleteCol = (colData, rowData) => {
        return <></>;
    };
 
    return (
        <Page>
            <div className="d-flex">
                <BodySection>
                    <div className="p-3">
                        <Header
                            size="1"
                            className="pb-3 ux-rfi-font-header"
                            labelKey="manage_team_contacts"></Header>
                        <DataTable
                            col-data-keys="name,state,offering,since"
                            col-default-headers="Name,State,Offering,Since,deleteCol"
                            datacollection="teamData"
                            customContent={{
                                deleteCol: getDeleteCol,
                            }}
                            keyField="id"
                            hover="false"
                            bordered="true"
                            striped="false"
                            emptymsg-key="no_records"
                            headerFormatter={{ deleteCol: formatDeleteCol }}
                        />
                        <Button
                            preIconClass="fa fa-plus"
                            size="small"
                            className="ux-rfi-green-button pl-2 pr-2 ml-0"
                            labelKey="add_team_member"></Button>
 
                        <Header
                            size="1"
                            className="pl-0 ml-0 pl-lg-3 pt-4 ux-rfi-font-header"
                            labelKey="manage_rfis"></Header>
 
                        <div className="row justify-content-center">
                            <div className="column pl-1 pr-1">
                                <Button
                                    size="small"
                                    className="ux-rfi-green-button"
                                    labelKey="view_all_open_rfis"></Button>
                            </div>
                            <div className="column pl-1 pr-1">
                                <Button
                                    size="small"
                                    className="ux-rfi-green-button"
                                    labelKey="view_published_rfis"></Button>
                            </div>
                            <div className="column pl-1 pr-1">
                                <Button
                                    size="small"
                                    className="ux-rfi-green-button"
                                    labelKey="view_all_rfis"></Button>
                            </div>
                        </div>
                    </div>
                </BodySection>
                <Modal isOpen={deleteModal}>
                    <Header
                        size="1"
                        className="ux-rfi-font-header"
                        labelKey="delete_contact"></Header>
                    <Header
                        size="1"
                        labelKey="remove_contact"
                        className="mb-3 remove-label font-weight-light ux-rfi-font-header"></Header>
                    <div className="row justify-content-between">
                        <Button
                            size="small"
                            className="ux-rfi-green-button cancel-btn float-right"
                            labelKey="cancel_btn"
                            click={closeDeleteModal}></Button>
                        <Button
                            size="small"
                            className="ux-rfi-green-button float-left"
                            labelKey="delete_contact_btn"
                            click={deleteContact}></Button>
                    </div>
                </Modal>
            </div>
        </Page>
    );
};
 
export default withPage(
    {
        Description: 'Manage My Team Page',
        ContentManager: true,
        LayoutStyle: 'rfi-dashboard',
        TemplateOptions: { cardWorkFlow: true },
    },
    ManageTeam,
);