I have a input in react final field. The user can input their own value. Theres an option to do something in the form, which makes an api call, and stores the data in state. If that is an option, we populate the input with that value.

However I want to user to be able to override that value. If the API call is made again, I want the value to replace the current input, but still be able to be overiden.

I can't fully delete the value from the api, it won't let me delete all of it and override the data.

File where I render the input, and state is handled.

  function RenderFilter(index: number) {
  const apiValue = dataFromAPI;
  return <TextBox key={index} value1={apiValue ? apiValue.value : null} />;
}

TextBox.jsx

import { Field } from 'react-final-form';

export interface IInput {
  name: string;
  value1: string;
}

function TextBox({ name, value1 }: IInput) {
  return (
    <Field name={name}>
      {({ input }) => (
        <>
          <input
            name={input.name}
            value={input.value}
            onChange={input.onChange}
          />
          {value1 && input.onChange(value1)}
        </>
      )}
    </Field>
  );
}

export { TextBox };

Any ideas?