I want to use react-select to append values to a hooks array. When I select from a selected option, I would like the item to be pushed into the hooks array, and when the user gets rid of the item, I would like the hooks array to update as well.

Here are my teams:

const teams = [
  { label: "Arsenal", value: 42 },
  { label: "Aston Villa", value: 66 },
  { label: "Brentford", value: 55 }
];

I want to put them all into a comparedTeams array hook, and update the hook onChange:

  const [comparedTeams, setComparedTeams] = useState([]);

    return (
          <div style={{ marginTop: "10px" }}>
            <Select
              isMulti
              name="select-teams"
              options={teams}
              className="basic-multi-select"
              classNamePrefix="select"
              onChange={(e) => {
                setComparedTeams([...comparedTeams, e.label]);
              }}
            />
          </div>
        );

However, whenever I add the item, I keep getting this error:

How do I get the hooks array to update when a user fires an onChange?