We currently have the following setup which works where we are sending a POST request via a form with a body and also redirects to a new endpoint.

// this is from another file. Just adding it here to show that myRef is a useRef hook. 
const myRef = React.useRef();

export const postData = (myRef, token, link) => {
  myRef.current.children[0].value = token;
  myRef.current.action = link;
  myRef.current.submit();
};

const MyForm = ({
  myRef,
}) => (
  <form id="MyForm" ref={myRef} method="POST">
    <!-- custom_token ends up as the key for the token value being set above as the post body -->
    <input name="custom_token" type="hidden" />
  </form>
);

export default MyForm;

I am trying to add more optional parameters to the post body. Since they are optional, only want to send if data exists.

But if I do the following, I still end up sending data with the newkey and empty value.

export const postData = (myRef, token, link, newValue) => {
  myRef.current.children[0].value = token;

  // NEW addition. Even though I am only setting value if it exists, 
  // the post body still ends up with newKey and empty value. 
  // I don't want to have the newKey and empty value at all since the value is not present.
  if (newValue) {
    myRef.current.children[1].value = newValue;
  }

  myRef.current.action = link;
  myRef.current.submit();
};

<form id="MyForm" ref={myRef} method="POST">
    <input name="custom_token" type="hidden" />

    <!-- NEW addition. -->
    <input name="newKey" type="hidden" />
</form>

Instead, I want to totally remove the key newKey from body since no value passed in.

Is there a way around this? Thanks.