Mantine - [@mantine/core] Each option must have value property

Question

After going through documentation and examples, I am unable to understand why when I provide the value to each option, I still get error stating Each Option must have a value property. Any help is appreciated

If I remove companies && companies.map((company: Company) => I am able to see the value as expected, I dont understand why adding logic breaks it.

<AppShell.Main>
  <Container size="md">
    <Autocomplete
      placeholder="Pick value or enter anything"
      data={
        companies &&
        companies.map((company: Company) => [
          {
            value: "Rick",
            group: "Used to be a pickle",
            items: ["a", "b"],
          },
          {
            value: "Morty",
            group: "Never was a pickle",
            items: ["v", "c"],
          },
          {
            value: "Beth",
            group: "Never was a pickle",
            items: ["d", "de"],
          },
          {
            value: "Summer",
            group: "Never was a pickle",
            items: ["af", "bf"],
          },
        ])
      }
    />
  </Container>
</AppShell.Main>

Answer 1

For anyone who runs into the error. The solution is to use flatMap so that you can provide it one single array object

    <Autocomplete
      placeholder="Pick value or enter anything"
      data={
        companies &&
        companies.flatMap((company: Company) => [
          {
            value: company.companyId,
            group: company.sector,
            items: [`${company.name} - ${company.ticker}`],
          },
        ])
      }
    />