Pattern for composing pre-bound array components

[tjbrennan]

I've been following the documentation for Form Composition but trying to make a reusable array component has thrown a wrench in things. I want to make a simple component for flat arrays of strings, but even before extracting my array code into a new component, the subfield name doesn't want to accept a variable:

<form.AppField name="people" mode="array">
  {(field) => (
    <div>
      {field.state.value.map((_, i) => {
        <form.AppField key={i} name={`${field.name}[${i}]`}>
          ...
        </form.AppField>
      })}
    </div>
  )}
</form.AppField>

In the above, typescript complains about name={`${field.name}[${i}]`} but not name={`people[${i}]`}. Can you offer any guidance into how I can make a reusable component for arrays that can make use of the form and field context without having to explicitly write out the name strings? Thanks!