Sending the ID of a Mui-Datatables row for an edit modal on React

I've been lurking Stack Overflow forever, I've always been able to find solutions without asking, but I've come across an issue that I can't solve.

I've got the following code:

 const columns = [
    {
        name: "_id",
        label: "Id",
        options: {
            filter: true,
            sort: true,
            display: false,
        }
    },
    {
        name: "messageId",
        label: "ID",
        options: {
            filter: true,
            sort: false,
        }
    },
    {
        name: "messageContent",
        label: "Message",
        options: {
            filter: true,
            sort: false,
        }
    },

    {
        name: "showFrom",
        label: "showFrom",
        options: {
            filter: true,
            sort: false,
        }
    },
    {
        name: "showUntil",
        label: "Show Until",
        options: {
            filter: true,
            sort: false,
        }
    },
    {
        name: "colour",
        label: "colour",
        options: {
            filter: true,
            sort: false,
        }
    },
    {
        name: "Edit",
        options: {
            filter: true,
            sort: false,
            empty: true,
            customBodyRender: () => {
                return (
                    <button onClick={setEditMessage(_id)}>
                        Edit
                    </button>
                );
            }
        }
    },
];

This sets the columns for a MUI-Datatables I'm using to display some messages from MongoDB. There's a specific ID these messages have, accessible through the _id column. I would like to then pass on a specific row's ID to an edit modal component, which has the following code:

const MessageModal = () => {
    const {
        isLoading,
        isEditing,
        showAlert,
        displayAlert,
        colourOptions,
        handleChange,
        clearValues,
        createMessage,
        editMessage,
        setEditJob, _id,
messageId,
messageContent,
showFrom,
showUntil,
colour,


    } = useAppContext()

    const handleSubmit = e => {
        e.preventDefault()
        if (!messageId || !messageContent || || !showFrom || !showUntil) {
            displayAlert()
            return
        }
        if (isEditing) {
            editMessage()
            return
        }
        createMessage()
    }
    const handleMessageInput = (e) => {
        const name = e.target.name
        const value = e.target.value
        handleChange({name, value})
    }

    // modal consts
    const [open, setOpen] = React.useState(false);

    const handleClickOpen = () => {
        setOpen(true);
    };

    const handleClose = () => {
        setOpen(false);
    };

    return (
        <div>

            <Button variant="outlined" onClick={handleClickOpen}>
                Create Message
            </Button>
            <form onSubmit={handleSubmit}>
                <Dialog open={open} onClose={handleClose}>

                    <DialogTitle>{isEditing ? 'Edit Message' : 'Create Message'}</DialogTitle>
                    <DialogContent>
                        <DialogContentText>
                            Please fill up the following fields.
                        </DialogContentText>
                        {showAlert && <Alert/>}

                        <FormRow type="text" labelText='Message ID' name="messageId" value={messageId}
                                 handleChange={handleMessageInput}/>
                       
                        <FormRow type="text" labelText='Message' name="messageContent" value={messageContent}
                                 handleChange={handleMessageInput}/>


                        <FormRow type="date" labelText='Show From' name="showFrom" value={showFrom}
                                 handleChange={handleMessageInput}/>
                        <FormRow type="date" labelText='Show Until' name="showUntil" value={showUntil}
                                 handleChange={handleMessageInput}/>
                        <FormRowSelect name="colour" value={colour} handleChange={handleMessageInput}
                                       list={colourOptions}/>


                    </DialogContent>
                    <DialogActions>
                        <Button onClick={handleClose}>Cancel</Button>
                        <Button
                            onClick={(e) => {
                                e.preventDefault()
                                clearValues()
                            }}>
                            Clear Message
                        </Button>
                        <Button onClick={handleSubmit} disabled={isLoading}>Create Message</Button>
                    </DialogActions>

                </Dialog>
            </form>
        </div>


    )
}

This is the SET EDIT MESSAGE action in the reducer:

 if(action.type === SET_EDIT_MESSAGE){
    const message = state.messages.find((message)=> message._id === action.payload.id)
    const {_id, messageId, messageContent, showFrom, showUntil, colour } = message
    return {
        ...state,
        isEditing: true,
        editMessageId:  _id,
        messageId,
        messageContent,
        showFrom,
        showUntil,
        colour
    }
}

This should be able to grab the ID from the row and load it so that the modal can then know what data to pull and push. Yet it doesn't work and I'm not entirely sure why. Any ideas or suggestions?

Thank you very much!