Loosing Focus While Typing On Custom Input Field React-Final-Form-Arrays

Question

I'm using custom component to show the text input field nothing fancy just the basic component

const CustomTextField = ({ ...rest }) => {
  return <input {...rest} />;
};

When I'm trying to using this component inside react-final-form-array for some reason I'm losing focus when typing on the input field, I guess it's because of the re-rendering.

<Field
    name={`${name}.lastName`}
    component={({ input, meta, ...rest }) => {
      return (
        <CustomTextField {...input} type="text" {...rest} />
      );
    }}
    placeholder="Last Name"
  />

here is the link to the full code on codesandbox

As you can see the "First Name" works fine but the "Last Name" losing focus while typing.

How can I fix this issue, any help is appreciated

Thanks

Answer 1

Use it like this:

const CustomTextField = (props) => {
  return <input {...props.input} />;
};

and

<Field 
   name={`${name}.lastName`} 
   component={CustomTextField}
   placeholder="Last Name"
/>