Каков наилучший способ обновить автоматически сгенерированное поле при удалении строки в FieldArray?

Question

У меня есть массив полей с автоматически сгенерированным отключенным полем, что-то вроде этого:

Я хочу удалить промежуточную строку и затем автоматически обновитьЗначения для поля id и сохраняют все данные строк. Например, я удаляю строку 2:

это код для этого примера:

import React from "react";
import { render } from "react-dom";
import { Formik, FieldArray, Field } from "formik";

export const FormExample = () => (
  
    
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
        }, 500)
      }
      render={({ values }) => (
        
           (
              
                {values.friends.map((category, index) => (
                  
                   
                   
                    arrayHelpers.remove(index)} // remove a friend from the list
                      >
                        -
                      
                  
                ))}
                 arrayHelpers.push({id: values.friends.length})}>                    
                    Add a friend
                  
              
            )}
          />
          {JSON.stringify(values, null, 2)}

)} />);const App = () => (

);визуализации (, document.getElementById ("root"));

Каков наилучший способ достичь этого? Заранее спасибо