useref - mandatory fields or field ?

[FredericLatour]

In the paymentform.jsx file, the useRef does not seem to be used (see source below).

Therefore cardholderName?.current?.value will always be null.
Why not provide a proper working example?

Moreover, you are mentioning in a comment (see source below):

These fields are optional for Sandbox but mandatory for production integration

Which are those fields ? Are you referring to both card-holder and card-billing-address-country. If they are both mandatory why are you only passing card-holder (with null value though)?

This is really frustrating to deal with your sample code. Each one seems different than the other for no specific reason and there is always one thing or another missing.
It would make like so much easier to have a reference implementation complete and working.

const SubmitPayment = ({ onHandleMessage }) => {
  // Here declare the variable containing the hostedField instance
  const { cardFields } = usePayPalHostedFields();
  const cardHolderName = useRef(null);

  const submitHandler = () => {
    if (typeof cardFields.submit !== "function") return; // validate that \`submit()\` exists before using it
    //if (errorMsg) showErrorMsg(false);
    cardFields
      .submit({
        // The full name as shown in the card and billing addresss
        // These fields are optional for Sandbox but mandatory for production integration
        cardholderName: cardHolderName?.current?.value,
      })
      .then(async (data) => onHandleMessage(await onApproveCallback(data)))
      .catch((orderData) => {
        onHandleMessage(
          `Sorry, your transaction could not be processed...${JSON.stringify(
            orderData,
          )}`,
        );
      });
  };

  return (
    <button onClick={submitHandler} className="btn btn-primary">
      Pay
    </button>
  );
};