How to add specific error message based on form fields

How to add specific error messages based on form fields instead of the same text “The field is required.” I used the below code but not working

document.addEventListener('wpcf7invalid', function (event) {

if (event.detail.apiResponse.invalidFields['your-name']) {
event.detail.apiResponse.invalidFields['your-name'].message = 'Please enter your full name.';
}

if (event.detail.apiResponse.invalidFields['your-email']) {
event.detail.apiResponse.invalidFields['your-email'].message = 'Please enter a valid email address.';
}

event.preventDefault();
}, false);

Please check this screenshot. https://prnt.sc/eXOhU3H0l2Q6 I need to replace that error text based on the form fields name