formik: TypeError: `array.splice is not a function` with non-array errors

🐛 Bug report

Current Behavior

• Create a form with a FieldArray.
• setErrors to be of the form {"0": ['invalid']} (note that we’re not using an array here).
• When you remove the first item in the field array (using arrayHelpers.remove, it crashes with TypeError: a.splice is not a function

Expected behavior

No crash, should just work. Note that while I was testing, it seems it was working fine with 1.2.0.

Reproducible example

https://codesandbox.io/s/mjoknk1q2y

// Helper styles for demo
import "./helper.css";
import { MoreResources, DisplayFormikState } from "./helper";

import React from "react";
import { render } from "react-dom";
import { Formik, Form, FieldArray, Field, getIn } from "formik";
import * as Yup from "yup";

// To reproduce:
// 1. Click submit
// 2. Try to remove the first item
// 3. Observe the crash `array.slice is not a function`

const App = () => (
  <div>
    <h1>Friend List</h1>
    <Formik
      initialValues={{ friends: [{ name: "jared" }] }}
      onSubmit={(values, actions) => {
        // HERE, note that we set the error using an object - not an array.
        actions.setErrors({ friends: { "0": { name: ["invalid"] } } });
      }}
      render={({ values }) => (
        <Form>
          <FieldArray
            name="friends"
            render={arrayHelpers => (
              <div>
                {values.friends && values.friends.length > 0 ? (
                  values.friends.map((friend, index) => (
                    <div key={index}>
                      <Field name={`friends.${index}.name`}>
                        {({ field, form }) => {
                          const error = getIn(form.errors, field.name);
                          console.log(error);
                          console.log(field);
                          console.log(form.touched[field.name]);
                          return (
                            <div>
                              <input
                                type="text"
                                {...field}
                                placeholder="First Name"
                              />
                              {error && <div className="error">{error}</div>}
                            </div>
                          );
                        }}
                      </Field>
                      <button
                        type="button"
                        onClick={() => arrayHelpers.remove(index)} // remove a friend from the list
                      >
                        -
                      </button>
                      <button
                        type="button"
                        onClick={() => arrayHelpers.insert(index, "")} // insert an empty string at a position
                      >
                        +
                      </button>
                    </div>
                  ))
                ) : (
                  <button type="button" onClick={() => arrayHelpers.push("")}>
                    {/* show this when user has removed all friends from the list */}
                    Add a friend
                  </button>
                )}
                <div>
                  <button type="submit">Submit</button>
                </div>
              </div>
            )}
          />
        </Form>
      )}
    />
  </div>
);

render(<App />, document.getElementById("root"));

Suggested solution(s)

In my case, the back-end returns nested object errors using an object with numerical keys. This makes sense, because it allows it to report an error for the 125th object by just returning {friends: {124: ["invalid"]}}.

This looks like a regression - formik should allow that too.

Your environment

Software	Version(s)
Formik	1.3.2
React	16.6.3
TypeScript	N/A
Browser	N/A
npm/Yarn	N/A
Operating System	N/A