# Data

https://www.json-generator.com/api/json/get/cqVmFQHuUO

Fetch the data from the above JSON generator API and populate the DataList's data prop using the `eyeColor` field.

<DataList
  multiSelect={true}
  showCount={true}
  showSearch={false}
  data={["green", "blue", "grey", "blue"]}
  defaultSelected={["green"]}
  onChange=(prev, next) => {
    console.log("prev: ", prev)
    console.log("next: ", next)
  }
/>

[ ] blue (2)
[x] green (1)
[ ] grey (1)

# You should:

- Support the following props:
- data - input data (array).
- defaultSelected - Select a list-item present in the list.
- Add support for multiple selection via checkboxes, controlled by a boolean prop - multiSelect.
- Show the count of the elements. showCount - (boolean) to show/hide the count.
- Show a search field to filter the list elements.
- Expose an onChange method to get the previous and current selected values.

# Tool

Use codesandbox.io for the solution.