Reusable array component

function ArrayTextField({placeholder}) {
    const field = useFieldContext<Array<string>>()
    const form = useFormContext()

    return (
        <div>
            {
                field.state.values.map((_, index) => {
                    <form.Field
                        key={index}
                        name={`${field.name}[${index}]`}>
                        {(subfield) => (
                            <Input
                                value={subfield.state.value}
                                onChange={(e) => {
                                    subfield.handleChange(e.target.value)
                                }}
                                onBlur={subfield.handleBlur}
                                placeholder={placeholder}
                            />
                        )}
                    </form.Field>
                })
            }
            <button onClick={field.pushValue("")}>
                Add
            </button>
        </div>
    )
}