Populating a react-select select with option groups

Using react-select and trying to populate it with grouped options as per code block 1 below:

ExhibitionOption is defined in code block 2:

Where I have the console.logs, these are being output as I would expect them to be:

The issue is that where I am calling this in the Select control

options={exhibitionOptions}

it is highlighting this issue and I don't know why. The select is also not being populated:

Please can someone advise what the issue is and what I need to do to correct it.

Type 'Item | undefined' is not assignable to type 'OptionsOrGroups<unknown, GroupBase<unknown>> | undefined'.
  Type 'Item' is missing the following properties from type 'readonly unknown[]': length, concat, join, slice, and 26 more.
Select.d.ts(184, 5): The expected type comes from property 'options' which is declared here on type 'IntrinsicAttributes & Omit<PublicBaseSelectProps<unknown, true, GroupBase<unknown>>, StateManagedPropKeys> & Partial<...> & StateManagerAdditionalProps<...> & RefAttributes<...>'

import { useState, useEffect } from 'react';
import { client } from "@/sanity/lib/client";
import makeAnimated from 'react-select/animated';
import Select from 'react-select';
import { ExhibitionOption, Item } from '@/constants/ExhibitionOption';
interface Props {
selectedExhibitionOptions: ExhibitionOption[];
onChange: (exhibitionOption: ExhibitionOption[]) => void;
};
const ExhibitionOptionsSelector = ({selectedExhibitionOptions, onChange}: Props) => {
const animatedComponents = makeAnimated();
const [exhibitionOptions, setExhibitionOptions] = useState<Item>();
useEffect(() => {
const fetchOptions = async () => {
try {
const response = await client.fetch(*[_type == &quot;category&quot; &amp;&amp; active] | order(name asc) { _id, name });
const exhibitionOptions = {
label: "Categories",
options: response.map((option: { _id: string; name: string }) => ({
label: option.name,
value: option._id,
}))
};

setExhibitionOptions(exhibitionOptions);
console.log(response);
console.log(exhibitionOptions);
}
catch (error) {
console.error("Error fetching data: ", error);
}
};
fetchOptions();
}, []);
return <Select options={exhibitionOptions} components={animatedComponents} isMulti isClearable closeMenuOnSelect={false} />
}
export default ExhibitionOptionsSelector

export type ExhibitionOption = {
  label: string;
  value: string;
};

export type Item = {
  label: string;
  options: ExhibitionOption[];
};