Expected behavior Validate form fields and allow me to "catch" form data with button onClick

Actual behavior Validation does not work with preventDefault

Resources (screenshots, code snippets etc.) Garden Variety React form submission usually has an onClick event that prevents the form from submitting so the program can do something with the form data.

  const handleGeneralProfileInfoSubmit = (e) => {
    e.preventDefault();

    const address = {
      addressType: currentContactDetailType,
      streetAddress1: addr,
      streetAddress2: addr2,
      city: city,
      region: region,
      postalCode: zip,
    };
// Send data to server
  } 

<MDBBtn className="me-1"  color="success" onClick={handleGeneralProfileInfoSubmit}  >
Accept
</MDBBtn>

If I use this pattern, MDBValidation does not work. If I remove the onClick handler then MDBValidation works, but the form is submitted and I do not have an opportunity to work with the data as above. What is the secret here? How do I get MDValidation to work AND have access to the form data using the onClick handler?

I thought about putting a submit event in my onclick handler, but same problem. In order to fire validation I would have to call submit event before I sent the data to the server so I would not get an opportunity to do so.

Can you please provide sample code? thank you.