Passing an array from my database to conform.collection options

[Joseamica]

ON this example:

   <form {...form.props}>
      <fieldset>
        <legend>Please select the correct answers</legend>
        {conform
          .collection(answer, {
            type: 'checkbox',
            options: ['a', 'b', 'c', 'd'],
          })
          .map((props, index) => (
            <div key={index}>
              <label>{props.value}</label>
              <input {...props} />
            </div>
          ))}
        <div>{answer.error}</div>
      </fieldset>
      <button>Submit</button>
    </form>

they hardcode the options a,b,c, and d.

the problem is that what I want to show is my modifier names.

I make it like this, but I receive an [object Object]:

<Form {...form.props} method="POST">
          <fieldset>
            <legend>Please select the correct modifiers</legend>

            {conform
              .collection(fields.modifier, {
                type: 'checkbox',
                options: data.modifierGroup,
              })
              .map((props, index) => {
                console.log(props)

                return (
                  <div key={index}>
                    {props.value.modifiers.map((modifier: Modifiers) => {
                      return (
                        <div key={modifier.id}>
                          <input {...props} />
                          <label>{modifier.name}</label>
                        </div>
                      )
                    })}
                    {/* <label>{props.value.name}</label> */}
                    {/* <input {...props} /> */}
                  </div>
                )
              })}
            <div>{fields.modifier.error}</div>
          </fieldset>
          <Spacer spaceY="1" />
          <button>Submit</button>
        </Form>

any thoughts?

[Joseamica]

I find the solution using flatMap, for anyone searching for this answer:

        <Form {...form.props} method="POST">
          <fieldset>
            <legend>Please select the correct modifiers</legend>

            {conform
              .collection(fields.modifier, {
                type: 'checkbox',
                options: data.modifierGroup.flatMap((modifierGroup: any) => {
                  return modifierGroup.modifiers.map((modifier: Modifiers) => {
                    return modifier.name
                  })
                }),
              })
              .map((props, index) => {
                console.log(props)
                return (
                  <div key={index}>
                    <label>{props.value}</label>
                    <input {...props} />
                  </div>
                )
              })}
            <div>{fields.modifier.error}</div>
          </fieldset>
          <Spacer spaceY="1" />
          <button>Submit</button>
        </Form>
        ```