How would I set a input to have a different form state than what the UI displays

Question

I have a standard text input in my code base

I have a use case where I need to call the change function in react final form and set a value, but I need the text value to read something else.

For example

const NameInput = () => {
  return (
    <div>
      <label htmlFor="name">Name:</label>
      <Field name="name" component="input" type="text" placeholder="Enter your name" />
    </div>
  );
};


const MyForm = () => {
  const onSubmit = (values) => {
    console.log(values);
  };

  return (
    <Form
      onSubmit={onSubmit}
      render={({ handleSubmit }) => (
        <form onSubmit={handleSubmit}>
          <NameInput />
          {/* Include other form fields */}
          <button type="submit">Submit</button>
        </form>
      )}
    />
  );
};

Then in a separate hook I call the change function change('name', 'Jack')

This sets the form state to Jack, and the text box now reads Jack. However when the form state is Jack, I wan't to show something else in the text box.