How do I listen to an event and change the value before I submit the form?

I have two components. One is my parent page which handle the submission, and my child component which receive the value from db.

My parent page

const submitEditForm = async (event: any) => {    dispatch('submit')    console.log(formInfo)    const response = await updateAction(configs.update, props.rowData.id, formInfo);    if (errorChecker(response)) {        showToast($t('common.record_has_been_updated'), 'success');        onClose(true);    } else {        // console.log(response.data)        // showToast(response.data, 'error');        onClose(false);    }}

My child page

function handleSubmit() {    // Change value back to item.value    value = formattedData.filter((item) => item.preselected).map((item) => item.value);}onMount(async() => {    window.addEventListener('submit', handleSubmit) })

When I fetch the api and got my value, the value is in keys, so I change the key to its corresponding value and display it. But then when I resubmit the form, I want it to be in keys again. I tried changing it before submission but then it submit the form before change it to key.

In my code i tried dispatch but it submit the form then only change my value.