I have this data when I console.log(data):

export const data = [
  {
    test: [
      {
        product: "Shirt1",
        variantion: [
          { size: "M", color: "blue" },
          { size: "S", color: "blue" }
        ]
      },
      {
        product: "Shirt3",
        variantion: [
          { size: "L", color: "red" },
          { size: "M", color: "blue" }
        ]
      }
    ]
  }
];

Instead of having the test, can it be converted to something like this? Or will it cause any problems in the future since this is a nested array?

export const data = [
  {
    product: "Shirt1",
    variantion: [
      { size: "M", color: "blue" },
      { size: "S", color: "blue" }
    ]
  },
  {
    product: "Shirt3",
    variantion: [
      { size: "L", color: "red" },
      { size: "M", color: "blue" }
    ]
  }
];

codesandbox link: https://codesandbox.io/s/react-hook-form-usefieldarray-nested-arrays-2-efwq6

I tried removing the test

const defaultValues = {
  test: [
    {
      product: "",
      nestedArray: [{ size: "", color: "", design: "" }]
    }
  ]
};

But it will have these errors:

/src/index.js: Unexpected token (11:4) 9 | const defaultValues = { 10 | > 11 | { | ^ 12 | product: "", 13 | nestedArray: [{ size: "", color: "", design: "" }] 14 | }
browser
Parsing error: Unexpected token 9 | const defaultValues = { 10 | > 11 | { | ^ 12 | product: "", 13 | nestedArray: [{ size: "", color: "", design: "" }] 14 | } (null)