() => {
  const [selectedValue, setSelectedValue] = React.useState('');

  return (
    <>
      <Paragraph style={{marginBottom: "24px"}}>My favorite chameleon is: {selectedValue}</Paragraph>
      <AutoComplete
        id="my-favorite-chameleon"
        label="What's your favorite type of chameleon?"
        suggestions={[
          "Panther Chameleon (Furcifer pardalis)",
          "Parson's Chameleon (Calumma parsonii)",
          "Pied Chameleon (Trioceros werneri)",
          "Peacock Chameleon (Trioceros peretti)",
          "Veiled Chameleon (Chamaeleo calyptratus)",
          "Jackson's Chameleon (Trioceros jacksonii)",
          "Carpet Chameleon (Furcifer lateralis)",
          "Fischer's Chameleon (Kinyongia fischeri)",
          "Graceful Chameleon (Chamaeleo gracilis)",
        ]}
        onChange={setSelectedValue}
        value={selectedValue}
        markMatches={props.markMatches}
      />
    </>
  );
};