Javascript 由于多选功能，格式未知

我正在使用React.js实现一个multi-select，但它不起作用。。。我认为这不是一个大问题，但我不知道问题在哪里。。。 实际上，我正在尝试实现以下代码：在我的代码中

这是我的密码：

import React, {Component} from "react";
import { useQuery, gql } from '@apollo/client';
import chroma from "chroma-js";
import CustomSelect from 'react-select';


const Select = (props) => {
        const QUERY_1 = gql`
        query Select{
            area{
                label
                value
            }
        }
        `;
        const {loading, error, data} = useQuery(QUERY_1)
        console.log(data);
        if (loading) return (<p>Loading...</p>);
        if (error) return (<p>Error : {error.message}</p>);
        const listr = () => {
            return data.area.map(todo=>({value: todo.value, label: todo.label}))
    }
    const colourStyles = {
  control: styles => ({ ...styles, backgroundColor: 'white' }),
  option: (styles, { data, isDisabled, isFocused, isSelected }) => {
    const color = chroma(data.color);
    return {
      ...styles,
      backgroundColor: isDisabled
        ? null
        : isSelected
        ? data.color
        : isFocused
        ? color.alpha(0.1).css()
        : null,
      color: isDisabled
        ? '#ccc'
        : isSelected
        ? chroma.contrast(color, 'white') > 2
          ? 'white'
          : 'black'
        : data.color,
      cursor: isDisabled ? 'not-allowed' : 'default',

      ':active': {
        ...styles[':active'],
        backgroundColor: !isDisabled && (isSelected ? data.color : color.alpha(0.3).css()),
      },
    };
  },
  multiValue: (styles, { data }) => {
    const color = chroma(data.color);
    return {
      ...styles,
      backgroundColor: color.alpha(0.1).css(),
    };
  },
  multiValueLabel: (styles, { data }) => ({
    ...styles,
    color: data.color,
  }),
  multiValueRemove: (styles, { data }) => ({
    ...styles,
    color: data.color,
    ':hover': {
      backgroundColor: data.color,
      color: 'white',
    },
  }),
};
    return (
            <CustomSelect
                closeMenuOnSelect={false}
                defaultValue={[listr(props.id)[0], listr(props.id)[1]]}
                isMulti
                options={listr(props.id)}
                menuPortalTarget={document.body}
                styles={{menuPortal: base =>
                    ({ ...base, zIndex: 9999}),
                    ...colourStyles, ...{control: styles =>
                    ({...styles, zIndex: '9999 !important', overflow: 'visible'})}}}
            />
        );
}

export default Select;

在我的浏览器中，我得到以下错误行：

    Error: unknown format: 
  };
  },
  multiValue: (styles, { data }) => {
> const color = chroma(data.color);
  ^  return {
  ...styles,
   backgroundColor: color.alpha(0.1).css(),

你能帮我吗

多谢各位

    Error: unknown format: 
  };
  },
  multiValue: (styles, { data }) => {
> const color = chroma(data.color);
  ^  return {
  ...styles,
   backgroundColor: color.alpha(0.1).css(),