Update below code to set the selected inventoryTransferId on click on Edit and store in state and open inventoryStockTransfer modal in edit mode

import {
    Box,
    Chip,
    Grid,
    InputAdornment,
    MenuItem,
    Skeleton,
    Table,
    TableBody,
    TableCell,
    TableContainer,
    TableFooter,
    TableHead,
    TablePagination,
    TableRow,
    Typography,
    debounce
} from "@mui/material";
import { IconSearch } from "@tabler/icons-react";
import { useEffect, useMemo, useState } from "react";
import DeleteConfirmation from "../../../src/components/common/deleteConfirmation";
import PageContainer from "../../../src/components/containers/PageContainer";
import CustomLoadingButton from "../../../src/components/forms/theme-elements/CustomLoadingButton";
import CustomTextField from "../../../src/components/forms/theme-elements/CustomTextField";
import InventoryStockTransfer from "../../../src/components/inventory/inventoryStockTransfer";
import { useAlert } from "../../../src/helpers/alert.provider";
import { LONG_DATE_FORMAT } from "../../../src/helpers/constants";
import { tzFormat } from "../../../src/helpers/timezone";
import ActionMenu from "../../../src/layouts/full/ActionMenu";
import BlankCard from "../../../src/layouts/full/BlankCard";
import ParentCard from "../../../src/layouts/full/ParentCard";
import { TablePaginationActions } from "../../../src/layouts/full/TablePaginationActions";
import { useDeleteStockTransfer, useGetStockTransfersPaged } from "../../../src/store/inventory.store";
import { LABELS_CONFIG } from "../../../src/utils/constants";

const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps = {
    PaperProps: {
        style: {
            maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
            width: 250,
        },
    },
};

const statusColorMap = {
    Draft: { label: "Draft", color: "#B0BEC5" },
    ReadyToSend: { label: "Ready to Send", color: "#90CAF9" },
    InTransit: { label: "In Transit", color: "#80CBC4" },
    ReadyToReceive: { label: "Ready to Receive", color: "#A5D6A7" },
    Completed: { label: "Completed", color: "#66BB6A" },
    Cancelled: { label: "Cancelled", color: "#EF9A9A" },
};

const StockTransfer = () => {
    const { showSuccess, showError } = useAlert();
    const [isModalOpen, setModalOpen] = useState(false);
    const { getStockTransfers, isLoading, stockTransfers, totalItems } = useGetStockTransfersPaged();
    const [showDeleteConfirmation, setShowDeleteConfirmation] = useState<{
        show: boolean;
        item: string;
    }>({ show: false, item: "" });
    const [searchValue, setSearchValue] = useState<string>("");
    const [pagedRequest, setPagedRequest] = useState<DTO.PagedListRequest>({
        pageNumber: 0,
        pageSize: 10,
        searchText: "",
        sortBy: "-createdOn",
    });

    const { deleteStockTransfer, isLoading: isDeleting } = useDeleteStockTransfer();
    useEffect(() => {
        fetchStockTransfers();
    }, [pagedRequest]);

    const fetchStockTransfers = async () => {
        try {
            getStockTransfers(pagedRequest);
        } catch (error: any) {
            showError(error.message);
        }
    };

    const handleChangePage = (_event: any, newPage: any) => {
        setPagedRequest({ ...pagedRequest, pageNumber: newPage + 1 });
    };

    const handleChangeRowsPerPage = (event: any) => {
        setPagedRequest({
            ...pagedRequest,
            pageSize: event.target.value,
            pageNumber: 1,
        });
    };

    const onInputChange = (e) => {
        setPagedRequest((c) => {
            return { ...c, searchText: e.target.value, pageNumber: 1 };
        });
    };

    const handleSearch = useMemo(() => debounce(onInputChange, 500), [onInputChange]);

    const getColorLabel = (status) => {
        return statusColorMap[status] || { label: status, color: "default" };
    };

    const deleteStockTransferFn = async () => {
        if (showDeleteConfirmation.show) {
            try {
                await deleteStockTransfer(showDeleteConfirmation.item, {
                    onSuccess: () => {
                        showSuccess(LABELS_CONFIG.success.stockTransferDeleted);
                        fetchStockTransfers();
                        setShowDeleteConfirmation({ show: false, item: "" });
                    },
                });
            } catch (error: any) {
                const errorMessage =
                    LABELS_CONFIG.errors[error?.response?.data?.code] || LABELS_CONFIG.errors.genericErrorMessage;
                showError(errorMessage);
                setShowDeleteConfirmation({ show: false, item: "" });
            }
        }
    };

    return (
        <PageContainer>
            <ParentCard
                title="Stock Transfers"
                action={
                    <CustomLoadingButton
                        loading={false}
                        text="Add"
                        variant="contained"
                        onClick={() => setModalOpen(true)}
                    />
                }
            >
                <>
                    <Box textAlign="right" sx={{ mb: 2 }}>
                        <Grid container>
                            <Grid item xs={6} textAlign="left">
                                <CustomTextField
                                    InputProps={{
                                        startAdornment: (
                                            <InputAdornment position="start">
                                                <IconSearch size="1.1rem" />
                                            </InputAdornment>
                                        ),
                                    }}
                                    placeholder="Search stock transfer"
                                    onChange={(e) => {
                                        setSearchValue(e.target.value);
                                        handleSearch(e);
                                    }}
                                    value={searchValue}
                                    width={250}
                                    size="small"
                                />
                            </Grid>
                        </Grid>
                    </Box>
                    {isLoading ? (
                        <Skeleton variant="rounded" animation="wave" width="100%" height={220} />
                    ) : (
                        <>
                            {!stockTransfers || stockTransfers.length === 0 ? (
                                <Box margin={2}>
                                    <Typography align="center" variant="h4">
                                        No Stock Transfers found.
                                    </Typography>
                                </Box>
                            ) : (
                                <BlankCard>
                                    <TableContainer component={Box}>
                                        <Table aria-label="custom pagination table" sx={{ width: "100%", tableLayout: "fixed" }} size="small">
                                            <TableHead>
                                                <TableRow>
                                                    <TableCell style={{ width: "20%" }}><Typography variant="h6">Created</Typography></TableCell>
                                                    <TableCell style={{ width: "20%" }}><Typography variant="h6">From Warehouse</Typography></TableCell>
                                                    <TableCell style={{ width: "20%" }}><Typography variant="h6">To Warehouse</Typography></TableCell>
                                                    <TableCell style={{ width: "20%" }}><Typography variant="h6">Booked Out</Typography></TableCell>
                                                    <TableCell style={{ width: "20%" }}><Typography variant="h6">Booked In</Typography></TableCell>
                                                    <TableCell style={{ width: "20%" }}><Typography variant="h6">Status</Typography></TableCell>
                                                    <TableCell align="right" style={{ width: "7%" }}></TableCell>
                                                </TableRow>
                                            </TableHead>
                                            <TableBody>
                                                {stockTransfers && stockTransfers.map((row) => (
                                                    <TableRow key={row.inventoryTransferId}>
                                                        <TableCell><Typography color="textSecondary" variant="h6" fontWeight="400">{tzFormat(row.createdOn, LONG_DATE_FORMAT)}</Typography></TableCell>
                                                        <TableCell><Typography color="textSecondary" variant="h6" fontWeight="400">{row.fromWarehouseName}</Typography></TableCell>
                                                        <TableCell><Typography color="textSecondary" variant="h6" fontWeight="400">{row.toWarehouseName}</Typography></TableCell>
                                                        <TableCell>
                                                            <Typography color="textSecondary" variant="h6" fontWeight="400">
                                                                {row.bookedOutTime ? tzFormat(row.bookedOutTime, LONG_DATE_FORMAT) : "-"}
                                                            </Typography>
                                                        </TableCell>
                                                        <TableCell>
                                                            <Typography color="textSecondary" variant="h6" fontWeight="400">
                                                                {row.bookedInTime ? tzFormat(row.bookedInTime, LONG_DATE_FORMAT) : "-"}
                                                            </Typography>
                                                        </TableCell>
                                                        <TableCell>
                                                            <div>
                                                                <Chip
                                                                    label={getColorLabel(row.status).label}
                                                                    variant="outlined"
                                                                    size="small"
                                                                    style={{
                                                                        borderColor: getColorLabel(row.status).color,
                                                                        color: getColorLabel(row.status).color,
                                                                    }}
                                                                />
                                                            </div>
                                                        </TableCell>
                                                        <TableCell align="right">
                                                            <ActionMenu>
                                                                <MenuItem>Edit</MenuItem>
                                                                <MenuItem
                                                                    key="4"
                                                                    onClick={() =>
                                                                        setShowDeleteConfirmation({
                                                                            show: true,
                                                                            item: row.inventoryTransferId || "",
                                                                        })
                                                                    }
                                                                >
                                                                    Delete
                                                                </MenuItem>
                                                            </ActionMenu>
                                                        </TableCell>
                                                    </TableRow>
                                                ))}
                                            </TableBody>
                                            <TableFooter>
                                                <TableRow>
                                                    <TablePagination
                                                        rowsPerPageOptions={[5, 10, 25, { label: "All", value: -1 }]}
                                                        colSpan={6}
                                                        count={totalItems || 0}
                                                        rowsPerPage={pagedRequest?.pageSize || 10}
                                                        page={pagedRequest?.pageNumber ? pagedRequest.pageNumber - 1 : 0}
                                                        SelectProps={{
                                                            native: true,
                                                        }}
                                                        onPageChange={handleChangePage}
                                                        onRowsPerPageChange={handleChangeRowsPerPage}
                                                        ActionsComponent={TablePaginationActions}
                                                    />
                                                </TableRow>
                                            </TableFooter>
                                        </Table>
                                    </TableContainer>
                                    <DeleteConfirmation
                                        isLoading={isDeleting}
                                        open={showDeleteConfirmation.show}
                                        onClose={() => {
                                            setShowDeleteConfirmation({ show: false, item: "" });
                                        }}
                                        onConfirm={deleteStockTransferFn}
                                    />
                                </BlankCard>
                            )}

                            {isModalOpen && (<InventoryStockTransfer onClose={() => { setModalOpen(false) }} onSuccess={() => { setModalOpen(false); fetchStockTransfers(); showSuccess('Transfer saved susccessfully') }} open={isModalOpen} />)}

                        </>
                    )}
                </>
            </ParentCard>
        </PageContainer>
    );
};

export default StockTransfer;