Filter by other attributes not only by label

[sjavonehq]

Is there a way to filter not only by label, but also by, for example, color?
Let's say that I want to search "Ocean", so I can type "#00..." and it will show me the Ocean option in the results.

export const colourOptions: readonly ColourOption[] = [
  { value: 'ocean', label: 'Ocean', color: '#00B8D9', isFixed: true },
  { value: 'blue', label: 'Blue', color: '#0052CC', isDisabled: true },
  { value: 'purple', label: 'Purple', color: '#5243AA' },
  { value: 'red', label: 'Red', color: '#FF5630', isFixed: true },
  { value: 'orange', label: 'Orange', color: '#FF8B00' },
  { value: 'yellow', label: 'Yellow', color: '#FFC400' },
  { value: 'green', label: 'Green', color: '#36B37E' },
  { value: 'forest', label: 'Forest', color: '#00875A' },
  { value: 'slate', label: 'Slate', color: '#253858' },
  { value: 'silver', label: 'Silver', color: '#666666' },
];

[sjavonehq]

I think I might have found a solution:

import React from "react";
import Select from "react-select";
import { colourOptions, ColourOption } from "./docs/data";

const filterOptions = (
  candidate: { label: string; value: string; data: ColourOption },
  input: string
) => {
  const search = input.toLowerCase();

  return (
    candidate.label.toLowerCase().includes(search) ||
    candidate.data.color.toLowerCase().includes(search)
  );
};

export default function CustomSelect() {
  return (
    <Select
      defaultValue={colourOptions[0]}
      isClearable
      isSearchable
      name="color"
      options={colourOptions}
      filterOption={filterOptions}
    />
  );
}