\n {data?.icon && (\n \n )}\n \n {label}\n {sublabel ? {sublabel} : null}\n
\n {buttonLabel && (\n \n )}\n \n );\n};\nOption.propTypes = {\n innerRef: PropTypes.any,\n data: PropTypes.shape({\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n label: PropTypes.string,\n sublabel: PropTypes.string,\n buttonLabel: PropTypes.string,\n icon: PropTypes.string,\n iconColor: PropTypes.string,\n }).isRequired,\n};\n\nconst SearchAndSelectField = (props) => {\n const {\n id,\n defaultOptions,\n onChange,\n onSearch,\n isLoading,\n value,\n error,\n label,\n helpText,\n minSearchTermLength = 3,\n searchIcon = true,\n className = \"\",\n variant,\n required,\n ...rest\n } = props;\n\n const loadingMessage = useCallback(() => \"Recherche...\", []);\n const noOptionsMessage = useCallback(\n ({ inputValue }) =>\n inputValue.length < minSearchTermLength\n ? `Entrez au moins ${minSearchTermLength} lettre${\n minSearchTermLength > 1 ? \"s\" : \"\"\n } pour chercher`\n : \"Pas de résultats\",\n [minSearchTermLength],\n );\n\n return (\n