function Demo() {
  const [v, setV] = useState([]);
  return (
    <MultiSelect id="ms" label="Frameworks"
      options={[{ value: 'react', label: 'React' }, ...]}
      value={v} onChange={setV}
    />
  );
}

<MultiSelect id="ms" label="Tags" options={[...]} error="Please select at least one tag." />

import { countries, getEmojiFlag } from 'countries-list';

const COUNTRY_OPTIONS = Object.entries(countries)
  .map(([code, data]) => ({ value: code, label: `${getEmojiFlag(code)} ${data.name}` }))
  .sort((a, b) => a.label.localeCompare(b.label));

function Demo() {
  const [v, setV] = useState([]);
  return (
    <MultiSelect id="ms-countries" label="Countries"
      options={COUNTRY_OPTIONS} placeholder="Select countries…"
      value={v} onChange={setV} hint="Select one or more countries." />
  );
}

<MultiSelect id="countries" label="Countries" searchable
  options={COUNTRY_OPTIONS} placeholder="Search and select…"
  value={v} onChange={setV} hint="Type to filter the list." />