I have a form builder that loads dynamic user generated inputs of varying types.

To add these to the page I loop through the fields object and load a component that renders the correct field based on the type.

Each field is a controlled component with the stage managed by the page.

const InputSwitch = ({ id, field }) => {
    if (field.type === "text") {
      return (
        <BasicTextArea
          key={field}
          editable={store.editMode}
          sectionTitle={field.name}
          sectionInputId={id}
          inputValue={field.value}
          sectionInputPlaceholder={field.placeholder}
          onChange={updateContentFieldValue}
        />
      );
    }
    if (field.type === "list") {
      return (
        <List
          key={field}
          editable={store.editMode}
          sectionTitle={field.name}
          sectionInputId={id}
          sectionInputPlaceholder={field.placeholder}
          items={field.value}
          onChange={updateContentFieldValue}
        />
      );
    }

{Object.keys(store.fields.contentFields).map((field) => (
  <InputSwitch
   key={field}
   id={field}
   field={store.fields.contentFields[field]}
   />
 ))}

This works, although I'm sure there's a better way. The issue is that when the fields are edited, causing a re-render, I lose focus on the field.

How can I keep focus after a re-render? I thought the unique keys would be enough.