why does reka-ui convert name attribute to [name][index] for array values

[stefanprobst]

why does reka-ui convert the name attribute to [name][index] for array values (e.g. when using a range slider, or a checkbox group)?

native html elements don't do that, and FormData does not work with it.

for example:

<form>
  <fieldset>
    <legend>Fruits</legend>
    <label>
      <input checked name="[fruits][0]" type="checkbox" value="kiwi">
      Kiwi
    </label>
    <label>
      <input checked name="[fruits][1]" type="checkbox" value="orange">
      Orange
    </label>
  </fieldset>
  
  <fieldset>
    <legend>Vegetables</legend>
    <label>
      <input checked name="vegetables" type="checkbox" value="broccoli">
      Broccoli
    </label>
    <label>
      <input checked name="vegetables" type="checkbox" value="carrot">
      Carrot
    </label>
  </fieldset>
  
  <button>Submit</button>
</form>

<script>
document.querySelector("form").addEventListener("submit", e => {
  const formData = new FormData(e.currentTarget);
  const fruits = formData.getAll("[fruits]");
  const vegetables = formData.getAll("vegetables");
  alert(JSON.stringify({ fruits, vegetables }));
  e.preventDefault();
})
</script>