diff --git a/src/behaviors/async.tsx b/src/behaviors/async.tsx
index cb061621..0e0e01c3 100644
--- a/src/behaviors/async.tsx
+++ b/src/behaviors/async.tsx
@@ -18,7 +18,7 @@ import { optionType } from '../propTypes';
 import { getDisplayName, isFunction, warn } from '../utils';
 
 import { TypeaheadComponentProps } from '../components/Typeahead';
-import type { Option } from '../types';
+import type { OptionType } from '../types';
 
 const propTypes = {
   /**
@@ -57,7 +57,7 @@ const propTypes = {
   useCache: PropTypes.bool,
 };
 
-export interface UseAsyncProps extends TypeaheadComponentProps {
+export interface UseAsyncProps<Option extends OptionType> extends TypeaheadComponentProps<Option> {
   delay?: number;
   isLoading: boolean;
   onSearch: (query: string) => void;
@@ -66,7 +66,7 @@ export interface UseAsyncProps extends TypeaheadComponentProps {
   useCache?: boolean;
 }
 
-type Cache = Record<string, Option[]>;
+type Cache<Option extends OptionType> = Record<string, Option[]>;
 
 interface DebouncedFunction extends Function {
   cancel(): void;
@@ -80,7 +80,7 @@ interface DebouncedFunction extends Function {
  *  - Optional query caching
  *  - Search prompt and empty results behaviors
  */
-export function useAsync(props: UseAsyncProps) {
+export function useAsync<Option extends OptionType>(props: UseAsyncProps<Option>) {
   const {
     allowNew,
     delay = 200,
@@ -96,7 +96,7 @@ export function useAsync(props: UseAsyncProps) {
     ...otherProps
   } = props;
 
-  const cacheRef = useRef<Cache>({});
+  const cacheRef = useRef<Cache<Option>>({});
   const handleSearchDebouncedRef = useRef<DebouncedFunction | null>(null);
   const queryRef = useRef<string>(props.defaultInputValue || '');
 
@@ -179,16 +179,15 @@ export function useAsync(props: UseAsyncProps) {
 }
 
 /* istanbul ignore next */
-export function withAsync<T extends UseAsyncProps = UseAsyncProps>(
+export function withAsync<Option extends OptionType, T extends UseAsyncProps<Option> = UseAsyncProps<Option>>(
   Component: ComponentType<T>
 ) {
   warn(
-    false,
-    'Warning: `withAsync` is deprecated and will be removed in the next ' +
+      false,
+      'Warning: `withAsync` is deprecated and will be removed in the next ' +
       'major version. Use `useAsync` instead.'
   );
-
-  const AsyncTypeahead = forwardRef<Typeahead, T>((props, ref) => (
+  const AsyncTypeahead = forwardRef<Typeahead<Option>, T>((props, ref) => (
     <Component {...props} {...useAsync(props)} ref={ref} />
   ));
 
diff --git a/src/behaviors/item.tsx b/src/behaviors/item.tsx
index 3d8788f7..0d616e36 100644
--- a/src/behaviors/item.tsx
+++ b/src/behaviors/item.tsx
@@ -19,26 +19,26 @@ import {
 } from '../utils';
 
 import { optionType } from '../propTypes';
-import { Option } from '../types';
+import { OptionType } from '../types';
 
 const propTypes = {
   option: optionType.isRequired,
   position: PropTypes.number,
 };
 
-export interface UseItemProps<T> extends HTMLProps<T> {
+export interface UseItemProps<T, Option extends OptionType> extends HTMLProps<T> {
   onClick?: MouseEventHandler<T>;
   option: Option;
   position: number;
 }
 
-export function useItem<T extends HTMLElement>({
+export function useItem<T extends HTMLElement, Option extends OptionType>({
   label,
   onClick,
   option,
   position,
   ...props
-}: UseItemProps<T>) {
+}: UseItemProps<T, Option>) {
   const {
     activeIndex,
     id,
@@ -47,7 +47,7 @@ export function useItem<T extends HTMLElement>({
     onInitialItemChange,
     onMenuItemClick,
     setItem,
-  } = useTypeaheadContext();
+  } = useTypeaheadContext<Option>();
 
   const itemRef = useRef<T>(null);
 
@@ -101,7 +101,7 @@ export function useItem<T extends HTMLElement>({
 }
 
 /* istanbul ignore next */
-export function withItem<T extends UseItemProps<HTMLElement>>(
+export function withItem<Option extends OptionType, T extends UseItemProps<HTMLElement, Option>>(
   Component: ComponentType<T>
 ) {
   warn(
diff --git a/src/behaviors/token.tsx b/src/behaviors/token.tsx
index e93438ba..9daf4e05 100644
--- a/src/behaviors/token.tsx
+++ b/src/behaviors/token.tsx
@@ -14,15 +14,15 @@ import { useRootClose } from 'react-overlays';
 import { getDisplayName, isFunction, warn } from '../utils';
 
 import { optionType } from '../propTypes';
-import { Option, OptionHandler } from '../types';
+import { OptionType, OptionHandler } from '../types';
 
-export interface UseTokenProps<T> extends Omit<HTMLProps<T>, 'onBlur'> {
+export interface UseTokenProps<T, Option extends OptionType> extends Omit<HTMLProps<T>, 'onBlur'> {
   // `onBlur` is typed more generically because it's passed to `useRootClose`,
   // which passes a generic event to the callback.
   onBlur?: (event: Event) => void;
   onClick?: MouseEventHandler<T>;
   onFocus?: FocusEventHandler<T>;
-  onRemove?: OptionHandler;
+  onRemove?: OptionHandler<Option>;
   option: Option;
 }
 
@@ -34,14 +34,14 @@ const propTypes = {
   option: optionType.isRequired,
 };
 
-export function useToken<T extends HTMLElement>({
+export function useToken<T extends HTMLElement, Option extends OptionType>({
   onBlur,
   onClick,
   onFocus,
   onRemove,
   option,
   ...props
-}: UseTokenProps<T>) {
+}: UseTokenProps<T, Option>) {
   const [active, setActive] = useState<boolean>(false);
   const [rootElement, attachRef] = useState<T | null>(null);
 
@@ -89,7 +89,7 @@ export function useToken<T extends HTMLElement>({
 }
 
 /* istanbul ignore next */
-export function withToken<T extends UseTokenProps<HTMLElement>>(
+export function withToken<Option extends OptionType, T extends UseTokenProps<HTMLElement, Option>>(
   Component: ComponentType<T>
 ) {
   warn(
diff --git a/src/components/AsyncTypeahead/AsyncTypeahead.test.tsx b/src/components/AsyncTypeahead/AsyncTypeahead.test.tsx
index 256bdf9e..70b26e69 100644
--- a/src/components/AsyncTypeahead/AsyncTypeahead.test.tsx
+++ b/src/components/AsyncTypeahead/AsyncTypeahead.test.tsx
@@ -11,6 +11,7 @@ import {
   render,
   userEvent,
 } from '../../tests/helpers';
+import {TestOption} from "../../tests/data";
 
 const TestComponent = (props) => {
   const [isLoading, setIsLoading] = useState(false);
@@ -37,7 +38,7 @@ const TestComponent = (props) => {
   );
 };
 
-describe('<AsyncTypeahead>', () => {
+describe('<AsyncTyThere isnt peahead>', () => {
   it('displays a search prompt', async () => {
     const promptText = 'Prompt text';
     render(<TestComponent promptText={promptText} />);
@@ -270,7 +271,7 @@ describe('<AsyncTypeahead>', () => {
   });
 
   it('exposes the typeahead instance and public methods', () => {
-    const ref = createRef<Typeahead>();
+    const ref = createRef<Typeahead<TestOption>>();
 
     render(
       <AsyncTypeahead
diff --git a/src/components/AsyncTypeahead/AsyncTypeahead.tsx b/src/components/AsyncTypeahead/AsyncTypeahead.tsx
index bf9b1793..46c17df1 100644
--- a/src/components/AsyncTypeahead/AsyncTypeahead.tsx
+++ b/src/components/AsyncTypeahead/AsyncTypeahead.tsx
@@ -1,10 +1,12 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, ReactElement, Ref } from 'react';
 import { useAsync, UseAsyncProps } from '../../behaviors/async';
 import TypeaheadComponent from '../Typeahead';
 import Typeahead from '../../core/Typeahead';
+import { OptionType } from "../../types";
 
-const AsyncTypeahead = forwardRef<Typeahead, UseAsyncProps>((props, ref) => (
+// Generics are handled with `as` casting
+const AsyncTypeahead = forwardRef<Typeahead<OptionType>, UseAsyncProps<OptionType>>((props, ref) => (
   <TypeaheadComponent {...useAsync(props)} ref={ref} />
-));
+))  as <Option extends OptionType>(p: UseAsyncProps<Option> & { ref?: Ref<Typeahead<Option>> }) => ReactElement;
 
 export default AsyncTypeahead;
diff --git a/src/components/MenuItem/MenuItem.stories.tsx b/src/components/MenuItem/MenuItem.stories.tsx
index e3e4bc85..511c0f48 100644
--- a/src/components/MenuItem/MenuItem.stories.tsx
+++ b/src/components/MenuItem/MenuItem.stories.tsx
@@ -5,19 +5,20 @@ import { Story, Meta } from '@storybook/react';
 
 import MenuItem, { MenuItemProps } from './MenuItem';
 import {
+  createTypeaheadContext,
   defaultContext,
-  TypeaheadContext,
   TypeaheadContextType,
 } from '../../core/Context';
+import {OptionType} from "../../types";
 
 export default {
   title: 'Components/MenuItem/MenuItem',
   component: MenuItem,
 } as Meta;
 
-interface Args {
-  context: Partial<TypeaheadContextType>;
-  props: MenuItemProps;
+interface Args<Option extends OptionType> {
+  context: Partial<TypeaheadContextType<Option>>;
+  props: MenuItemProps<Option>;
 }
 
 const value = {
@@ -25,13 +26,14 @@ const value = {
   id: 'test-id',
 };
 
-const Template: Story<Args> = ({ context, props }) => (
-  <TypeaheadContext.Provider value={{ ...value, ...context }}>
+const Template = <Option extends OptionType>(): Story<Args<Option>> => ({ context, props }) => {
+  const TypeaheadContext = createTypeaheadContext<Option>()
+  return <TypeaheadContext.Provider value={{...value, ...context}}>
     <MenuItem {...props} />
   </TypeaheadContext.Provider>
-);
+};
 
-export const Default = Template.bind({});
+export const Default = Template().bind({});
 Default.args = {
   props: {
     children: 'This is a menu item',
diff --git a/src/components/MenuItem/MenuItem.tsx b/src/components/MenuItem/MenuItem.tsx
index dabeee3d..5974dca9 100644
--- a/src/components/MenuItem/MenuItem.tsx
+++ b/src/components/MenuItem/MenuItem.tsx
@@ -2,6 +2,7 @@ import cx from 'classnames';
 import React, { forwardRef, HTMLAttributes, MouseEvent } from 'react';
 
 import { useItem, UseItemProps } from '../../behaviors/item';
+import {OptionType} from "../../types";
 
 export interface BaseMenuItemProps extends HTMLAttributes<HTMLAnchorElement> {
   active?: boolean;
@@ -27,8 +28,8 @@ export const BaseMenuItem = forwardRef<HTMLAnchorElement, BaseMenuItemProps>(
   }
 );
 
-export type MenuItemProps = UseItemProps<HTMLAnchorElement>;
+export type MenuItemProps<Option extends OptionType> = UseItemProps<HTMLAnchorElement, Option>;
 
-export default function MenuItem(props: MenuItemProps) {
+export default function MenuItem<Option extends OptionType>(props: MenuItemProps<Option>) {
   return <BaseMenuItem {...useItem(props)} />;
 }
diff --git a/src/components/Token/Token.stories.tsx b/src/components/Token/Token.stories.tsx
index aea6c469..4fcab8af 100644
--- a/src/components/Token/Token.stories.tsx
+++ b/src/components/Token/Token.stories.tsx
@@ -5,13 +5,14 @@ import { Story, Meta } from '@storybook/react';
 
 import Token, { TokenProps } from './Token';
 import { noop } from '../../utils';
+import {TestOption} from "../../tests/data";
 
 export default {
   title: 'Components/Token',
   component: Token,
 } as Meta;
 
-const Template: Story<TokenProps<HTMLElement>> = (args) => <Token {...args} />;
+const Template: Story<TokenProps<HTMLElement, TestOption>> = (args) => <Token {...args} />;
 
 export const Interactive = Template.bind({});
 Interactive.args = {
diff --git a/src/components/Token/Token.tsx b/src/components/Token/Token.tsx
index 36b03194..240a3c0a 100644
--- a/src/components/Token/Token.tsx
+++ b/src/components/Token/Token.tsx
@@ -5,6 +5,7 @@ import ClearButton from '../ClearButton';
 
 import { useToken, UseTokenProps } from '../../behaviors/token';
 import { isFunction } from '../../utils';
+import {OptionType} from "../../types";
 
 type HTMLElementProps = Omit<HTMLProps<HTMLDivElement>, 'onBlur' | 'ref'>;
 
@@ -68,7 +69,7 @@ const StaticToken = ({
   return <div className={classnames}>{children}</div>;
 };
 
-export interface TokenProps<T> extends UseTokenProps<T> {
+export interface TokenProps<T, Option extends OptionType> extends UseTokenProps<T, Option> {
   disabled?: boolean;
   readOnly?: boolean;
 }
@@ -77,12 +78,12 @@ export interface TokenProps<T> extends UseTokenProps<T> {
  * Individual token component, generally displayed within the
  * `TypeaheadInputMulti` component, but can also be rendered on its own.
  */
-const Token = ({
+const Token = <Option extends OptionType>({
   children,
   option,
   readOnly,
   ...props
-}: TokenProps<HTMLElement>) => {
+}: TokenProps<HTMLElement, Option>) => {
   const { ref, ...tokenProps } = useToken({ ...props, option });
   const child = <div className="rbt-token-label">{children}</div>;
 
diff --git a/src/components/Typeahead/Typeahead.stories.tsx b/src/components/Typeahead/Typeahead.stories.tsx
index 614142b5..fc234678 100644
--- a/src/components/Typeahead/Typeahead.stories.tsx
+++ b/src/components/Typeahead/Typeahead.stories.tsx
@@ -9,8 +9,9 @@ import Hint from '../Hint';
 import Menu from '../Menu';
 import MenuItem from '../MenuItem';
 
-import options, { Option } from '../../tests/data';
+import options, { TestOption } from '../../tests/data';
 import { noop } from '../../tests/helpers';
+import {OptionType} from "../../types";
 
 export default {
   title: 'Components/Typeahead',
@@ -53,7 +54,7 @@ const defaultProps = {
   positionFixed: true,
 };
 
-const Template: Story<TypeaheadComponentProps> = (args) => (
+const Template: Story<TypeaheadComponentProps<TestOption>> = (args) => (
   <Typeahead {...args} />
 );
 
@@ -122,7 +123,7 @@ CustomMenu.args = {
   renderMenu: (results, menuProps) => (
     <Menu {...menuProps}>
       {/* Use `slice` to avoid mutating the original array */}
-      {(results as Option[])
+      {results
         .slice()
         .reverse()
         .map((r, index) => (
@@ -134,7 +135,7 @@ CustomMenu.args = {
   ),
 };
 
-export const InputGrouping = (args: TypeaheadComponentProps) => (
+export const InputGrouping = <Option extends OptionType>(args: TypeaheadComponentProps<Option>) => (
   <div
     className={cx('input-group', {
       'input-group-sm': args.size === 'sm',
@@ -149,7 +150,7 @@ InputGrouping.args = {
   ...defaultProps,
 };
 
-export const Controlled = (args: TypeaheadComponentProps) => {
+export const Controlled = <Option extends OptionType = TestOption>(args: TypeaheadComponentProps<Option>) => {
   const [selected, setSelected] = useState(args.selected || []);
 
   return <Typeahead {...args} onChange={setSelected} selected={selected} />;
@@ -158,7 +159,7 @@ Controlled.args = {
   ...defaultProps,
 };
 
-export const InputValidation = (args: TypeaheadComponentProps) => {
+export const InputValidation = <Option extends OptionType = TestOption>(args: TypeaheadComponentProps<Option>) => {
   let feedback;
   if (args.isValid) {
     feedback = 'Looks good!';
diff --git a/src/components/Typeahead/Typeahead.test.tsx b/src/components/Typeahead/Typeahead.test.tsx
index 2d969684..cc388620 100644
--- a/src/components/Typeahead/Typeahead.test.tsx
+++ b/src/components/Typeahead/Typeahead.test.tsx
@@ -23,7 +23,8 @@ import {
   waitFor,
 } from '../../tests/helpers';
 
-import states, { Option } from '../../tests/data';
+import states, {TestOption} from '../../tests/data';
+import {TypeaheadState} from "../../types";
 
 const ID = 'rbt-id';
 
@@ -37,7 +38,7 @@ const inputProps = {
   type: 'number',
 };
 
-const TestComponent = forwardRef<Typeahead, Partial<TypeaheadComponentProps>>(
+const TestComponent = forwardRef<Typeahead<TestOption>, Partial<TypeaheadComponentProps<TestOption>>>(
   (props, ref) => (
     <TypeaheadComponent
       id={ID}
@@ -116,7 +117,7 @@ describe('<Typeahead>', () => {
   });
 
   it('truncates selections when using `defaultSelected`', () => {
-    let selected: Option[] = states.slice(0, 4);
+    let selected = states.slice(0, 4);
     render(
       <Default defaultSelected={selected}>
         {(state) => {
@@ -129,7 +130,7 @@ describe('<Typeahead>', () => {
   });
 
   describe('behaviors when selections are passed in', () => {
-    let selected: { name: string }[];
+    let selected: TestOption[];
     let selectedText: string;
 
     beforeEach(() => {
@@ -239,7 +240,7 @@ describe('<Typeahead>', () => {
       { disabled: true, name: 'boo' },
       { name: 'baz' },
       { disabled: true, name: 'bro' },
-    ];
+    ] as TestOption[];
 
     render(<Default options={options} />);
     getInput().focus();
@@ -411,9 +412,9 @@ describe('<Typeahead>', () => {
 
   describe('updates when re-rendering with new props', () => {
     it('acts as a controlled input in single-select mode', () => {
-      let selected: Option[] = [];
+      let selected: TestOption[] = [];
 
-      const children = (state) => {
+      const children = (state: TypeaheadState<TestOption>) => {
         selected = state.selected;
       };
       const selected1 = states.slice(0, 1);
@@ -459,13 +460,13 @@ describe('<Typeahead>', () => {
     });
 
     it('updates the selections and input value in single-select mode', async () => {
-      let selected: Option[] = [];
+      let selected: TestOption[] = [];
       const user = userEvent.setup();
 
       render(
         <Controlled selected={states.slice(0, 1)}>
           {(state) => {
-            selected = state.selected;
+            selected = state.selected as TestOption[];
           }}
         </Controlled>
       );
@@ -486,7 +487,7 @@ describe('<Typeahead>', () => {
 
   describe('`highlightOnlyResult` behavior', () => {
     let onChange: jest.Mock;
-    let selected: Option[];
+    let selected: TestOption[];
 
     beforeEach(() => {
       onChange = jest.fn((s) => (selected = [s]));
@@ -543,16 +544,18 @@ describe('<Typeahead>', () => {
 
     it('does not highlight or select a disabled result', async () => {
       const user = userEvent.setup();
+      const options = [
+        { name: 'foo' },
+        { disabled: true, name: 'bar' },
+        { disabled: true, name: 'boo' },
+        { name: 'baz' },
+      ] as TestOption[]
+
       render(
         <Default
           highlightOnlyResult
           onChange={onChange}
-          options={[
-            { name: 'foo' },
-            { disabled: true, name: 'bar' },
-            { disabled: true, name: 'boo' },
-            { name: 'baz' },
-          ]}
+          options={options}
         />
       );
 
@@ -1012,7 +1015,7 @@ describe('<Typeahead>', () => {
       <Default
         renderMenuItemChildren={
           // Render the capital instead of the state name.
-          (o) => o.capital
+          (o) => <span>{o.capital}</span>
         }
       />
     );
@@ -1145,7 +1148,8 @@ describe('<Typeahead>', () => {
     });
 
     it('adds the custom option when `allowNew` is set to `true`', async () => {
-      let selected: Option[] = [];
+      type TestOptionWithId = TestOption & {id: string};
+      let selected: TestOptionWithId[] = [];
       const user = userEvent.setup();
 
       render(
@@ -1153,7 +1157,7 @@ describe('<Typeahead>', () => {
           emptyLabel={emptyLabel}
           newSelectionPrefix={newSelectionPrefix}
           onChange={(s) => {
-            selected = s;
+            selected = s as TestOptionWithId[];
           }}
         />
       );
@@ -1235,7 +1239,7 @@ describe('<Typeahead>', () => {
 
 describe('<Typeahead> Public Methods', () => {
   it('exposes the typeahead instance and public methods', () => {
-    const ref = createRef<Typeahead>();
+    const ref = createRef<Typeahead<TestOption>>();
     render(<TestComponent ref={ref} />);
 
     expect(typeof ref.current?.blur).toBe('function');
@@ -1247,7 +1251,7 @@ describe('<Typeahead> Public Methods', () => {
   });
 
   it('calls the public `focus` and `blur` methods', () => {
-    const ref = createRef<Typeahead>();
+    const ref = createRef<Typeahead<TestOption>>();
     render(<TestComponent ref={ref} />);
 
     const input = getInput();
@@ -1261,7 +1265,7 @@ describe('<Typeahead> Public Methods', () => {
 
   it('calls the public `clear` method', async () => {
     const user = userEvent.setup();
-    const ref = createRef<Typeahead>();
+    const ref = createRef<Typeahead<TestOption>>();
     const { container } = render(
       <TestComponent multiple ref={ref} defaultSelected={states.slice(0, 3)} />
     );
@@ -1280,13 +1284,13 @@ describe('<Typeahead> Public Methods', () => {
   });
 
   it('calls the public `getInput` method', () => {
-    const ref = createRef<Typeahead>();
+    const ref = createRef<Typeahead<TestOption>>();
     render(<TestComponent ref={ref} />);
     expect(ref.current?.getInput()).toEqual(getInput());
   });
 
   it('calls the public `hideMenu` method', async () => {
-    const ref = createRef<Typeahead>();
+    const ref = createRef<Typeahead<TestOption>>();
     render(<TestComponent ref={ref} />);
 
     getInput().focus();
@@ -1298,7 +1302,7 @@ describe('<Typeahead> Public Methods', () => {
   });
 
   it('calls the public `toggleMenu` method', () => {
-    const ref = createRef<Typeahead>();
+    const ref = createRef<Typeahead<TestOption>>();
     render(<TestComponent ref={ref} />);
 
     expect(getMenu()).not.toBeInTheDocument();
@@ -1312,7 +1316,7 @@ describe('<Typeahead> Public Methods', () => {
 
   it('clears the typeahead after a selection', async () => {
     const user = userEvent.setup();
-    const ref = createRef<Typeahead>();
+    const ref = createRef<Typeahead<TestOption>>();
     const onChange = jest.fn(() => {
       ref.current?.clear();
     });
@@ -1498,7 +1502,7 @@ describe('<Typeahead> `change` events', () => {
   });
 
   it('does not call either when `clear()` is called externally', () => {
-    const ref = createRef<Typeahead>();
+    const ref = createRef<Typeahead<TestOption>>();
     const selected = states.slice(0, 1);
     render(
       <TestComponent
@@ -1521,8 +1525,8 @@ describe('<Typeahead> `change` events', () => {
 
 describe('<Typeahead> input value behaviors', () => {
   let defaultInputValue: string;
-  let defaultSelected: Option[];
-  let selected: Option[];
+  let defaultSelected: TestOption[];
+  let selected: TestOption[];
 
   beforeEach(() => {
     defaultInputValue = 'This is a default value';
diff --git a/src/components/Typeahead/Typeahead.tsx b/src/components/Typeahead/Typeahead.tsx
index b7cd2317..1af8739e 100644
--- a/src/components/Typeahead/Typeahead.tsx
+++ b/src/components/Typeahead/Typeahead.tsx
@@ -1,6 +1,6 @@
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React, { CSSProperties, forwardRef, ReactNode, Ref } from 'react';
+import React, { CSSProperties, forwardRef, ReactElement, ReactNode, Ref } from 'react';
 
 import Typeahead from '../../core/Typeahead';
 
@@ -27,7 +27,7 @@ import { checkPropType, inputPropsType, sizeType } from '../../propTypes';
 
 import {
   Align,
-  Option,
+  OptionType,
   RenderToken,
   RenderTokenProps,
   Size,
@@ -36,15 +36,15 @@ import {
   TypeaheadManagerChildProps,
 } from '../../types';
 
-export interface RenderMenuProps
+export interface RenderMenuProps<Option extends OptionType>
   extends Omit<
-    TypeaheadMenuProps,
+    TypeaheadMenuProps<Option>,
     'labelKey' | 'options' | 'renderMenuItemChildren' | 'text'
   > {
-  renderMenuItemChildren?: RenderMenuItemChildren;
+  renderMenuItemChildren?: RenderMenuItemChildren<Option>;
 }
 
-export interface TypeaheadComponentProps extends Partial<TypeaheadProps> {
+export interface TypeaheadComponentProps<Option extends OptionType> extends Partial<TypeaheadProps<Option>> {
   align?: Align;
   className?: string;
   clearButton?: boolean;
@@ -52,7 +52,7 @@ export interface TypeaheadComponentProps extends Partial<TypeaheadProps> {
   dropup?: boolean;
   emptyLabel?: ReactNode;
   flip?: boolean;
-  instanceRef?: Ref<Typeahead>;
+  instanceRef?: Ref<Typeahead<Option>>;
   isInvalid?: boolean;
   isLoading?: boolean;
   isValid?: boolean;
@@ -64,15 +64,15 @@ export interface TypeaheadComponentProps extends Partial<TypeaheadProps> {
   positionFixed?: boolean;
   renderInput?: (
     inputProps: TypeaheadInputProps,
-    props: TypeaheadManagerChildProps
+    props: TypeaheadManagerChildProps<Option>
   ) => JSX.Element;
   renderMenu?: (
     results: Option[],
-    menuProps: RenderMenuProps,
-    state: TypeaheadManagerChildProps
+    menuProps: RenderMenuProps<Option>,
+    state: TypeaheadManagerChildProps<Option>
   ) => JSX.Element;
-  renderMenuItemChildren?: RenderMenuItemChildren;
-  renderToken?: RenderToken;
+  renderMenuItemChildren?: RenderMenuItemChildren<Option>;
+  renderToken?: RenderToken<Option>;
   size?: Size;
   style?: CSSProperties;
 }
@@ -121,10 +121,10 @@ const defaultProps = {
   isLoading: false,
 };
 
-const defaultRenderMenu = (
+const defaultRenderMenu = <Option extends OptionType>(
   results: Option[],
-  menuProps: RenderMenuProps,
-  props: TypeaheadManagerChildProps
+  menuProps: RenderMenuProps<Option>,
+  props: TypeaheadManagerChildProps<Option>
 ) => (
   <TypeaheadMenu
     {...menuProps}
@@ -134,9 +134,9 @@ const defaultRenderMenu = (
   />
 );
 
-const defaultRenderToken = (
+const defaultRenderToken = <Option extends OptionType>(
   option: Option,
-  props: RenderTokenProps,
+  props: RenderTokenProps<Option>,
   idx: number
 ) => (
   <Token
@@ -154,13 +154,13 @@ const overlayPropKeys = [
   'dropup',
   'flip',
   'positionFixed',
-] as (keyof TypeaheadComponentProps)[];
+] as (keyof TypeaheadComponentProps<OptionType>)[];
 
-function getOverlayProps(props: TypeaheadComponentProps) {
+function getOverlayProps<Option extends OptionType>(props: TypeaheadComponentProps<Option>) {
   return pick(props, overlayPropKeys);
 }
 
-class TypeaheadComponent extends React.Component<TypeaheadComponentProps> {
+class TypeaheadComponent<Option extends OptionType> extends React.Component<TypeaheadComponentProps<Option>> {
   static propTypes = propTypes;
   static defaultProps = defaultProps;
 
@@ -172,7 +172,7 @@ class TypeaheadComponent extends React.Component<TypeaheadComponentProps> {
 
     return (
       <Typeahead {...this.props} options={options} ref={instanceRef}>
-        {(props: TypeaheadManagerChildProps) => {
+        {(props: TypeaheadManagerChildProps<Option>) => {
           const { hideMenu, isMenuShown, results } = props;
           const auxContent = this._renderAux(props);
 
@@ -228,7 +228,7 @@ class TypeaheadComponent extends React.Component<TypeaheadComponentProps> {
 
   _renderInput = (
     inputProps: TypeaheadInputProps,
-    props: TypeaheadManagerChildProps
+    props: TypeaheadManagerChildProps<Option>
   ) => {
     const { isInvalid, isValid, multiple, renderInput, renderToken, size } =
       this.props;
@@ -269,7 +269,7 @@ class TypeaheadComponent extends React.Component<TypeaheadComponentProps> {
   _renderMenu = (
     results: Option[],
     menuProps: OverlayRenderProps,
-    props: TypeaheadManagerChildProps
+    props: TypeaheadManagerChildProps<Option>
   ) => {
     const {
       emptyLabel,
@@ -296,7 +296,7 @@ class TypeaheadComponent extends React.Component<TypeaheadComponentProps> {
     );
   };
 
-  _renderAux = ({ onClear, selected }: TypeaheadManagerChildProps) => {
+  _renderAux = ({ onClear, selected }: TypeaheadManagerChildProps<Option>) => {
     const { clearButton, disabled, isLoading, size } = this.props;
 
     let content;
@@ -321,6 +321,7 @@ class TypeaheadComponent extends React.Component<TypeaheadComponentProps> {
   };
 }
 
-export default forwardRef<Typeahead, TypeaheadComponentProps>((props, ref) => (
-  <TypeaheadComponent {...props} instanceRef={ref} />
-));
+// Generics are handled with `as` casting
+export default forwardRef<Typeahead<OptionType>, TypeaheadComponentProps<OptionType>>((props, ref) =>
+    <TypeaheadComponent instanceRef={ref} {...props}  />
+) as <Option extends OptionType>(p: TypeaheadComponentProps<Option> & { ref?: React.Ref<Typeahead<Option>> }) => ReactElement
diff --git a/src/components/TypeaheadInputMulti/TypeaheadInputMulti.stories.tsx b/src/components/TypeaheadInputMulti/TypeaheadInputMulti.stories.tsx
index f4db75a3..d017a319 100644
--- a/src/components/TypeaheadInputMulti/TypeaheadInputMulti.stories.tsx
+++ b/src/components/TypeaheadInputMulti/TypeaheadInputMulti.stories.tsx
@@ -8,9 +8,10 @@ import TypeaheadInputMulti, {
   TypeaheadInputMultiProps,
 } from './TypeaheadInputMulti';
 
-import options from '../../tests/data';
+import options, {TestOption} from '../../tests/data';
 import { HintProvider, noop } from '../../tests/helpers';
 import type { Size } from '../../types';
+import {OptionType} from "../../types";
 
 export default {
   title: 'Components/TypeaheadInputMulti',
@@ -28,14 +29,14 @@ const defaultProps = {
   selected,
 };
 
-interface Args extends TypeaheadInputMultiProps {
+interface Args<Option extends OptionType> extends TypeaheadInputMultiProps<Option> {
   hintText?: string;
   isValid?: boolean;
   isInvalid?: boolean;
   size?: Size;
 }
 
-const Template: Story<Args> = ({ hintText = '', ...args }) => {
+const Template: Story<Args<TestOption>> = ({ hintText = '', ...args }) => {
   const [value, setValue] = useState(args.value);
   const [inputNode, setInputNode] = useState<HTMLInputElement | null>(null);
 
diff --git a/src/components/TypeaheadInputMulti/TypeaheadInputMulti.tsx b/src/components/TypeaheadInputMulti/TypeaheadInputMulti.tsx
index 59270c2e..5c1acf8f 100644
--- a/src/components/TypeaheadInputMulti/TypeaheadInputMulti.tsx
+++ b/src/components/TypeaheadInputMulti/TypeaheadInputMulti.tsx
@@ -9,14 +9,14 @@ import Input from '../Input';
 
 import { isSelectable, propsWithBsClassName } from '../../utils';
 
-import { Option, TypeaheadInputProps } from '../../types';
+import { OptionType, TypeaheadInputProps } from '../../types';
 
-export interface TypeaheadInputMultiProps extends TypeaheadInputProps {
+export interface TypeaheadInputMultiProps<Option extends OptionType> extends TypeaheadInputProps {
   children: ReactNode;
   selected: Option[];
 }
 
-function TypeaheadInputMulti(props: TypeaheadInputMultiProps) {
+function TypeaheadInputMulti<Option extends OptionType>(props: TypeaheadInputMultiProps<Option>) {
   const wrapperRef = React.useRef<HTMLDivElement>(null);
   const inputElem = React.useRef<HTMLInputElement | null>(null);
 
@@ -28,7 +28,7 @@ function TypeaheadInputMulti(props: TypeaheadInputMultiProps) {
     referenceElementRef,
     selected,
     ...rest
-  } = propsWithBsClassName<TypeaheadInputMultiProps>(props);
+  } = propsWithBsClassName<TypeaheadInputMultiProps<Option>>(props);
 
   function getInputRef(input: HTMLInputElement | null) {
     inputElem.current = input;
diff --git a/src/components/TypeaheadMenu/TypeaheadMenu.stories.tsx b/src/components/TypeaheadMenu/TypeaheadMenu.stories.tsx
index 2b6afec7..79043f92 100644
--- a/src/components/TypeaheadMenu/TypeaheadMenu.stories.tsx
+++ b/src/components/TypeaheadMenu/TypeaheadMenu.stories.tsx
@@ -5,8 +5,8 @@ import { Story, Meta } from '@storybook/react';
 
 import TypeaheadMenu, { TypeaheadMenuProps } from './TypeaheadMenu';
 
-import options from '../../tests/data';
-import { getOptionProperty } from '../../utils';
+import options, {TestOption} from '../../tests/data';
+import {OptionType} from "../../types";
 
 export default {
   title: 'Components/TypeaheadMenu',
@@ -20,7 +20,7 @@ const defaultProps = {
   text: '',
 };
 
-const Template: Story<TypeaheadMenuProps> = (args) => (
+const Template = <Option extends OptionType>(): Story<TypeaheadMenuProps<Option>> => (args) => (
   <div style={{ minHeight: '300px' }}>
     <div style={{ position: 'relative' }}>
       <TypeaheadMenu {...args} />
@@ -28,36 +28,33 @@ const Template: Story<TypeaheadMenuProps> = (args) => (
   </div>
 );
 
-export const Default = Template.bind({});
+export const Default = Template().bind({});
 Default.args = {
   ...defaultProps,
 };
 
-export const CustomOption = Template.bind({});
+export const CustomOption = Template().bind({});
 CustomOption.args = {
   ...defaultProps,
   options: [{ customOption: true, name: 'custom option' }],
   text: 'custom option',
 };
 
-export const Pagination = Template.bind({});
+export const Pagination = Template().bind({});
 Pagination.args = {
   ...defaultProps,
   options: [...options.slice(0, 5), { paginationOption: true }],
 };
 
-export const CustomChildren = Template.bind({});
+export const CustomChildren = Template<TestOption>().bind({});
 CustomChildren.args = {
   ...defaultProps,
   renderMenuItemChildren: (option) => {
-    const name = getOptionProperty(option, 'name');
-    const population = getOptionProperty(option, 'population');
-
     return (
       <>
-        <div>{name}</div>
+        <div>{option.name}</div>
         <div>
-          <small>Population: {population.toString()}</small>
+          <small>Population: {option.population.toString()}</small>
         </div>
       </>
     );
diff --git a/src/components/TypeaheadMenu/TypeaheadMenu.tsx b/src/components/TypeaheadMenu/TypeaheadMenu.tsx
index ef04c60f..292f7c35 100644
--- a/src/components/TypeaheadMenu/TypeaheadMenu.tsx
+++ b/src/components/TypeaheadMenu/TypeaheadMenu.tsx
@@ -6,20 +6,20 @@ import Menu, { MenuProps } from '../Menu';
 import MenuItem from '../MenuItem';
 
 import { getOptionLabel, getOptionProperty, isString } from '../../utils';
-import { LabelKey, Option } from '../../types';
+import { LabelKey, OptionType } from '../../types';
 
-export type RenderMenuItemChildren = (
+export type RenderMenuItemChildren<Option extends OptionType> = (
   option: Option,
-  menuProps: TypeaheadMenuProps,
+  menuProps: TypeaheadMenuProps<Option>,
   idx: number
 ) => JSX.Element;
 
-export interface TypeaheadMenuProps extends MenuProps {
-  labelKey: LabelKey;
+export interface TypeaheadMenuProps<Option extends OptionType> extends MenuProps {
+  labelKey: LabelKey<Option>;
   newSelectionPrefix?: ReactNode;
   options: Option[];
   paginationText?: ReactNode;
-  renderMenuItemChildren: RenderMenuItemChildren;
+  renderMenuItemChildren: RenderMenuItemChildren<Option>;
   text: string;
 }
 
@@ -42,14 +42,14 @@ const propTypes = {
 const defaultProps = {
   newSelectionPrefix: 'New selection: ',
   paginationText: 'Display additional results...',
-  renderMenuItemChildren: (option: Option, props: TypeaheadMenuProps) => (
+  renderMenuItemChildren: <Option extends OptionType>(option: Option, props: TypeaheadMenuProps<Option>) => (
     <Highlighter search={props.text}>
       {getOptionLabel(option, props.labelKey)}
     </Highlighter>
   ),
 };
 
-const TypeaheadMenu = (props: TypeaheadMenuProps) => {
+const TypeaheadMenu = <Option extends OptionType>(props: TypeaheadMenuProps<Option>) => {
   const {
     labelKey,
     newSelectionPrefix,
diff --git a/src/core/Context.tsx b/src/core/Context.tsx
index b975e652..ebc98fe6 100644
--- a/src/core/Context.tsx
+++ b/src/core/Context.tsx
@@ -1,17 +1,17 @@
 import { createContext, useContext } from 'react';
 
-import { noop } from '../utils';
-import { Id, Option, OptionHandler, SelectEvent } from '../types';
+import { noop, once } from '../utils';
+import { Id, OptionType, OptionHandler, SelectEvent } from '../types';
 
-export interface TypeaheadContextType {
+export interface TypeaheadContextType<Option extends OptionType> {
   activeIndex: number;
   hintText: string;
   id: Id;
   initialItem: Option | null;
   inputNode: HTMLInputElement | null;
   isOnlyResult: boolean;
-  onActiveItemChange: OptionHandler;
-  onAdd: OptionHandler;
+  onActiveItemChange: OptionHandler<Option>;
+  onAdd: OptionHandler<Option>;
   onInitialItemChange: (option?: Option) => void;
   onMenuItemClick: (option: Option, event: SelectEvent<HTMLElement>) => void;
   setItem: (option: Option, position: number) => void;
@@ -31,7 +31,5 @@ export const defaultContext = {
   setItem: noop,
 };
 
-export const TypeaheadContext =
-  createContext<TypeaheadContextType>(defaultContext);
-
-export const useTypeaheadContext = () => useContext(TypeaheadContext);
+export const createTypeaheadContext = once(<Option extends OptionType>() => createContext<TypeaheadContextType<Option>>(defaultContext));
+export const useTypeaheadContext = <Option extends OptionType>() => useContext(createTypeaheadContext<Option>());
diff --git a/src/core/Typeahead.tsx b/src/core/Typeahead.tsx
index 899e0a79..cd10b194 100644
--- a/src/core/Typeahead.tsx
+++ b/src/core/Typeahead.tsx
@@ -50,7 +50,7 @@ import { DEFAULT_LABELKEY } from '../constants';
 
 import type {
   FilterByCallback,
-  Option,
+  OptionType,
   SelectEvent,
   TypeaheadProps,
   TypeaheadState,
@@ -213,7 +213,7 @@ const defaultProps = {
   paginate: true,
 };
 
-type Props = TypeaheadProps;
+type Props<Option extends OptionType> = TypeaheadProps<Option>;
 
 /**
  * Manually trigger the input's change event.
@@ -230,7 +230,7 @@ function triggerInputChange(input: HTMLInputElement, value: string) {
   input.dispatchEvent(e);
 }
 
-class Typeahead extends React.Component<Props, TypeaheadState> {
+class Typeahead<Option extends OptionType> extends React.Component<Props<Option>, TypeaheadState<Option>> {
   static propTypes = propTypes;
   static defaultProps = defaultProps;
 
@@ -246,7 +246,7 @@ class Typeahead extends React.Component<Props, TypeaheadState> {
     this.props.autoFocus && this.focus();
   }
 
-  componentDidUpdate(prevProps: Props, prevState: TypeaheadState) {
+  componentDidUpdate(prevProps: Props<Option>, prevState: TypeaheadState<Option>) {
     const { labelKey, multiple, selected } = this.props;
 
     validateSelectedPropChange(selected, prevProps.selected);
@@ -278,7 +278,7 @@ class Typeahead extends React.Component<Props, TypeaheadState> {
     if (this.isMenuShown) {
       const cb = (
         isFunction(filterBy) ? filterBy : defaultFilterBy
-      ) as FilterByCallback;
+      ) as FilterByCallback<Option>;
 
       results = options.filter((option: Option) =>
         cb(option, mergedPropsAndState)
@@ -292,6 +292,7 @@ class Typeahead extends React.Component<Props, TypeaheadState> {
 
       // Add the custom option if necessary.
       if (addCustomOption(results, mergedPropsAndState)) {
+        // @ts-ignore
         results.push({
           customOption: true,
           [getStringLabelKey(labelKey)]: text,
@@ -300,6 +301,7 @@ class Typeahead extends React.Component<Props, TypeaheadState> {
 
       // Add the pagination item if necessary.
       if (shouldPaginate) {
+        // @ts-ignore
         results.push({
           [getStringLabelKey(labelKey)]: '',
           paginationOption: true,
@@ -367,7 +369,7 @@ class Typeahead extends React.Component<Props, TypeaheadState> {
   };
 
   _handleActiveIndexChange = (activeIndex: number) => {
-    this.setState((state: TypeaheadState) => ({
+    this.setState((state: TypeaheadState<Option>) => ({
       activeIndex,
       activeItem: activeIndex >= 0 ? state.activeItem : undefined,
     }));
@@ -517,7 +519,8 @@ class Typeahead extends React.Component<Props, TypeaheadState> {
     // Add a unique id to the custom selection. Avoid doing this in `render` so
     // the id doesn't increment every time.
     if (!isString(selection) && selection.customOption) {
-      selection = { ...selection, id: uniqueId('new-id-') };
+      // @ts-ignore selection is an object, since `isString` returned `false`
+      selection = { ...selection , id: uniqueId('new-id-') };
     }
 
     if (multiple) {
diff --git a/src/core/TypeaheadManager.tsx b/src/core/TypeaheadManager.tsx
index f6544363..5974e6a6 100644
--- a/src/core/TypeaheadManager.tsx
+++ b/src/core/TypeaheadManager.tsx
@@ -1,6 +1,6 @@
 import React, { KeyboardEvent, useEffect, useRef } from 'react';
 
-import { TypeaheadContext, TypeaheadContextType } from './Context';
+import {createTypeaheadContext, TypeaheadContextType} from './Context';
 import {
   defaultSelectHint,
   getHintText,
@@ -10,7 +10,7 @@ import {
   isFunction,
   pick,
 } from '../utils';
-import { TypeaheadManagerProps } from '../types';
+import {OptionType, TypeaheadManagerProps} from '../types';
 
 const inputPropKeys = [
   'activeIndex',
@@ -26,7 +26,7 @@ const inputPropKeys = [
   'onFocus',
   'onKeyDown',
   'placeholder',
-] as (keyof TypeaheadManagerProps)[];
+] as (keyof TypeaheadManagerProps<OptionType>)[];
 
 const propKeys = [
   'activeIndex',
@@ -40,7 +40,7 @@ const propKeys = [
   'selected',
   'text',
   'toggleMenu',
-] as (keyof TypeaheadManagerProps)[];
+] as (keyof TypeaheadManagerProps<OptionType>)[];
 
 const contextKeys = [
   'activeIndex',
@@ -52,9 +52,11 @@ const contextKeys = [
   'onInitialItemChange',
   'onMenuItemClick',
   'setItem',
-] as (keyof TypeaheadManagerProps)[];
+] as (keyof TypeaheadManagerProps<OptionType>)[];
+
+const TypeaheadManager = <Option extends OptionType>(props: TypeaheadManagerProps<Option>) => {
+  const TypeaheadContext = createTypeaheadContext<Option>()
 
-const TypeaheadManager = (props: TypeaheadManagerProps) => {
   const {
     allowNew,
     children,
@@ -110,7 +112,7 @@ const TypeaheadManager = (props: TypeaheadManagerProps) => {
     }),
   };
 
-  const contextValue: TypeaheadContextType = {
+  const contextValue: TypeaheadContextType<Option> = {
     ...pick(props, contextKeys),
     hintText,
     isOnlyResult: getIsOnlyResult(props),
diff --git a/src/core/TypeaheadState.ts b/src/core/TypeaheadState.ts
index 3633d37c..289a6221 100644
--- a/src/core/TypeaheadState.ts
+++ b/src/core/TypeaheadState.ts
@@ -1,9 +1,9 @@
-import { TypeaheadProps, TypeaheadState } from '../types';
+import {OptionType, TypeaheadProps, TypeaheadState} from '../types';
 import { getOptionLabel } from '../utils';
 
-type Props = TypeaheadProps;
+type Props<Option extends OptionType> = TypeaheadProps<Option>;
 
-export function getInitialState(props: Props): TypeaheadState {
+export function getInitialState<Option extends OptionType>(props: Props<Option>): TypeaheadState<Option> {
   const {
     defaultInputValue,
     defaultOpen,
@@ -40,7 +40,7 @@ export function getInitialState(props: Props): TypeaheadState {
   };
 }
 
-export function clearTypeahead(state: TypeaheadState, props: Props) {
+export function clearTypeahead<Option extends OptionType>(state: TypeaheadState<Option>, props: Props<Option>) {
   return {
     ...getInitialState(props),
     isFocused: state.isFocused,
@@ -49,7 +49,7 @@ export function clearTypeahead(state: TypeaheadState, props: Props) {
   };
 }
 
-export function clickOrFocusInput(state: TypeaheadState) {
+export function clickOrFocusInput<Option extends OptionType>(state: TypeaheadState<Option>) {
   return {
     ...state,
     isFocused: true,
@@ -57,7 +57,7 @@ export function clickOrFocusInput(state: TypeaheadState) {
   };
 }
 
-export function hideMenu(state: TypeaheadState, props: Props) {
+export function hideMenu<Option extends OptionType>(state: TypeaheadState<Option>, props: Props<Option>) {
   const { activeIndex, activeItem, initialItem, shownResults } =
     getInitialState(props);
 
@@ -71,6 +71,6 @@ export function hideMenu(state: TypeaheadState, props: Props) {
   };
 }
 
-export function toggleMenu(state: TypeaheadState, props: Props) {
+export function toggleMenu<Option extends OptionType>(state: TypeaheadState<Option>, props: Props<Option>) {
   return state.showMenu ? hideMenu(state, props) : { ...state, showMenu: true };
 }
diff --git a/src/propTypes.ts b/src/propTypes.ts
index 7213b76d..329986cb 100644
--- a/src/propTypes.ts
+++ b/src/propTypes.ts
@@ -3,7 +3,7 @@ import { Requireable } from 'react';
 
 import { SIZES } from './constants';
 import { isFunction, warn } from './utils';
-import type { InputProps, TypeaheadProps } from './types';
+import type {InputProps, OptionType, TypeaheadProps} from './types';
 
 interface InputPropItem {
   alt: string;
@@ -19,11 +19,11 @@ const INPUT_PROPS_BLACKLIST: InputPropItem[] = [
 
 export const sizeType = PropTypes.oneOf(SIZES);
 
-type Props = TypeaheadProps;
-type PropName = keyof Props;
-type Callback = (
-  props: Props,
-  propName: PropName,
+type Props<Option extends OptionType> = TypeaheadProps<Option>;
+type PropName<Option extends OptionType> = keyof Props<Option>;
+type Callback = <Option extends OptionType>(
+  props: Props<Option>,
+  propName: PropName<Option>,
   componentName: string
 ) => void;
 type Validator = Requireable<unknown>;
@@ -31,8 +31,8 @@ type Validator = Requireable<unknown>;
 /**
  * Allows additional warnings or messaging related to prop validation.
  */
-export function checkPropType(validator: Validator, callback: Callback) {
-  return (props: Props, propName: PropName, componentName: string) => {
+export function checkPropType<Option extends OptionType>(validator: Validator, callback: Callback) {
+  return (props: Props<Option>, propName: PropName<Option>, componentName: string) => {
     PropTypes.checkPropTypes(
       { [propName]: validator },
       props,
@@ -44,7 +44,7 @@ export function checkPropType(validator: Validator, callback: Callback) {
   };
 }
 
-export function caseSensitiveType(props: Props) {
+export function caseSensitiveType<Option extends OptionType>(props: Props<Option>) {
   const { caseSensitive, filterBy } = props;
   warn(
     !caseSensitive || typeof filterBy !== 'function',
@@ -52,8 +52,8 @@ export function caseSensitiveType(props: Props) {
   );
 }
 
-export function deprecated(validator: Validator, reason: string) {
-  return (props: Props, propName: PropName, componentName: string) => {
+export function deprecated<Option extends OptionType>(validator: Validator, reason: string) {
+  return (props: Props<Option>, propName: PropName<Option>, componentName: string) => {
     if (props[propName] != null) {
       warn(false, `The \`${propName}\` prop is deprecated. ${reason}`);
     }
@@ -67,7 +67,7 @@ export function deprecated(validator: Validator, reason: string) {
   };
 }
 
-export function defaultInputValueType(props: Props) {
+export function defaultInputValueType<Option extends OptionType>(props: Props<Option>) {
   const { defaultInputValue, defaultSelected, multiple, selected } = props;
   const name = defaultSelected.length ? 'defaultSelected' : 'selected';
 
@@ -81,7 +81,7 @@ export function defaultInputValueType(props: Props) {
   );
 }
 
-export function defaultSelectedType(props: Props) {
+export function defaultSelectedType<Option extends OptionType>(props: Props<Option>) {
   const { defaultSelected, multiple } = props;
 
   warn(
@@ -92,17 +92,17 @@ export function defaultSelectedType(props: Props) {
   );
 }
 
-export function highlightOnlyResultType({
+export function highlightOnlyResultType<Option extends OptionType>({
   allowNew,
   highlightOnlyResult,
-}: Props) {
+}: Props<Option>) {
   warn(
     !(highlightOnlyResult && allowNew),
     '`highlightOnlyResult` will not work with `allowNew`.'
   );
 }
 
-export function ignoreDiacriticsType(props: Props) {
+export function ignoreDiacriticsType<Option extends OptionType>(props: Props<Option>) {
   const { filterBy, ignoreDiacritics } = props;
   warn(
     ignoreDiacritics || typeof filterBy !== 'function',
@@ -110,7 +110,7 @@ export function ignoreDiacriticsType(props: Props) {
   );
 }
 
-export function inputPropsType({ inputProps }: Props) {
+export function inputPropsType<Option extends OptionType>({ inputProps }: Props<Option>) {
   if (
     !(
       inputProps &&
@@ -130,9 +130,9 @@ export function inputPropsType({ inputProps }: Props) {
   });
 }
 
-export function isRequiredForA11y(
-  props: Props,
-  propName: PropName,
+export function isRequiredForA11y<Option extends OptionType>(
+  props: Props<Option>,
+  propName: PropName<Option>,
   componentName: string
 ) {
   warn(
@@ -142,7 +142,7 @@ export function isRequiredForA11y(
   );
 }
 
-export function labelKeyType({ allowNew, labelKey }: Props) {
+export function labelKeyType<Option extends OptionType>({ allowNew, labelKey }: Props<Option>) {
   warn(
     !(isFunction(labelKey) && allowNew),
     '`labelKey` must be a string when `allowNew={true}`.'
@@ -154,7 +154,7 @@ export const optionType = PropTypes.oneOfType([
   PropTypes.string,
 ]);
 
-export function selectedType({ multiple, onChange, selected }: Props) {
+export function selectedType<Option extends OptionType>({ multiple, onChange, selected }: Props<Option>) {
   warn(
     multiple || !selected || selected.length <= 1,
     'You are passing multiple options to the `selected` prop of a Typeahead ' +
diff --git a/src/tests/data.ts b/src/tests/data.ts
index e136389c..3898ca80 100644
--- a/src/tests/data.ts
+++ b/src/tests/data.ts
@@ -39,7 +39,7 @@ export const defaultState = {
   text: '',
 };
 
-export interface Option {
+export interface TestOption {
   name: string;
   population: number;
   capital: string;
@@ -98,4 +98,4 @@ export default [
   { name: 'West Virginia', population: 1853011, capital: 'Charleston', region: 'South' },
   { name: 'Wisconsin', population: 5687289, capital: 'Madison', region: 'West' },
   { name: 'Wyoming', population: 563767, capital: 'Cheyenne', region: 'West' },
-];
+] as TestOption[];
diff --git a/src/tests/helpers.tsx b/src/tests/helpers.tsx
index 95574a12..61f47125 100644
--- a/src/tests/helpers.tsx
+++ b/src/tests/helpers.tsx
@@ -8,10 +8,11 @@ import { composeStories, composeStory } from '@storybook/testing-react';
 import { render, screen, RenderResult } from '@testing-library/react';
 
 import {
+  createTypeaheadContext,
   defaultContext,
-  TypeaheadContext,
   TypeaheadContextType,
 } from '../core/Context';
+import {OptionType} from "../types";
 
 export { axe };
 export * from '@storybook/testing-react';
@@ -52,11 +53,12 @@ export function generateSnapshots(
   });
 }
 
-interface HintProviderProps extends Partial<TypeaheadContextType> {
+interface HintProviderProps<Option extends OptionType> extends Partial<TypeaheadContextType<Option>> {
   children?: ReactNode;
 }
 
-export const HintProvider = ({ children, ...context }: HintProviderProps) => {
+export const HintProvider = <Option extends OptionType>({ children, ...context }: HintProviderProps<Option>) => {
+  const TypeaheadContext = createTypeaheadContext<Option>()
   return (
     <TypeaheadContext.Provider
       value={{
diff --git a/src/types.ts b/src/types.ts
index 99802717..adedc110 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -16,23 +16,23 @@ import { ALIGN_VALUES, SIZES } from './constants';
 
 export type Align = typeof ALIGN_VALUES[number];
 
-export type AllowNew =
+export type AllowNew<Option extends OptionType> =
   | boolean
-  | ((options: Option[], state: TypeaheadPropsAndState) => boolean);
+  | ((options: Option[], state: TypeaheadPropsAndState<Option>) => boolean);
 
-export type FilterByCallback = (
+export type FilterByCallback<Option extends OptionType> = (
   option: Option,
-  state: TypeaheadPropsAndState
+  state: TypeaheadPropsAndState<Option>
 ) => boolean;
 
 export type Id = string;
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type Option = string | Record<string, any>;
+export type OptionType = string | Record<string, any>;
 
-export type OptionHandler = (option: Option) => void;
+export type OptionHandler<Option extends OptionType> = (option: Option) => void;
 
-export type LabelKey = string | ((option: Option) => string);
+export type LabelKey<Option extends OptionType> = string | ((option: Option) => string);
 
 export type SelectEvent<T> = MouseEvent<T> | KeyboardEvent<T>;
 
@@ -43,9 +43,9 @@ export type SelectHint = (
 
 export type Size = typeof SIZES[number];
 
-export type TypeaheadChildren =
+export type TypeaheadChildren<Option extends OptionType> =
   | ReactNode
-  | ((props: TypeaheadManagerChildProps) => ReactNode);
+  | ((props: TypeaheadManagerChildProps<Option>) => ReactNode);
 
 export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;
 
@@ -55,34 +55,34 @@ export interface TypeaheadInputProps extends InputProps {
   referenceElementRef: RefCallback<HTMLElement>;
 }
 
-export interface RenderTokenProps {
+export interface RenderTokenProps<Option extends OptionType> {
   disabled?: boolean;
-  labelKey: LabelKey;
-  onRemove?: OptionHandler;
+  labelKey: LabelKey<Option>;
+  onRemove?: OptionHandler<Option>;
   tabIndex?: number;
 }
 
-export type RenderToken = (
+export type RenderToken<Option extends OptionType> = (
   option: Option,
-  props: RenderTokenProps,
+  props: RenderTokenProps<Option>,
   idx: number
 ) => JSX.Element;
 
-export interface TypeaheadProps {
-  allowNew: AllowNew;
+export interface TypeaheadProps<Option extends OptionType> {
+  allowNew: AllowNew<Option>;
   autoFocus: boolean;
   caseSensitive: boolean;
-  children: TypeaheadChildren;
+  children: TypeaheadChildren<Option>;
   defaultInputValue: string;
   defaultOpen: boolean;
   defaultSelected: Option[];
   emptyLabel?: ReactNode;
-  filterBy: string[] | FilterByCallback;
+  filterBy: string[] | FilterByCallback<Option>;
   highlightOnlyResult: boolean;
   id?: Id;
   ignoreDiacritics: boolean;
   inputProps?: InputProps;
-  labelKey: LabelKey;
+  labelKey: LabelKey<Option>;
   maxResults: number;
   minLength: number;
   multiple: boolean;
@@ -100,7 +100,7 @@ export interface TypeaheadProps {
   selectHint?: SelectHint;
 }
 
-export interface TypeaheadState {
+export interface TypeaheadState<Option extends OptionType> {
   activeIndex: number;
   activeItem?: Option;
   initialItem?: Option;
@@ -111,38 +111,38 @@ export interface TypeaheadState {
   text: string;
 }
 
-export type TypeaheadPropsAndState = Omit<TypeaheadProps, 'onChange'> &
-  TypeaheadState;
+export type TypeaheadPropsAndState<Option extends OptionType> = Omit<TypeaheadProps<Option>, 'onChange'> &
+  TypeaheadState<Option>;
 
-export interface TypeaheadManagerChildProps {
+export interface TypeaheadManagerChildProps<Option extends OptionType> {
   activeIndex: number;
   getInputProps: (props?: InputProps) => TypeaheadInputProps;
   hideMenu: () => void;
   isMenuShown: boolean;
-  labelKey: LabelKey;
+  labelKey: LabelKey<Option>;
   onClear: () => void;
   onHide: () => void;
-  onRemove: OptionHandler;
+  onRemove: OptionHandler<Option>;
   results: Option[];
   selected: Option[];
   text: string;
   toggleMenu: () => void;
 }
 
-export interface TypeaheadManagerProps extends TypeaheadPropsAndState {
+export interface TypeaheadManagerProps<Option extends OptionType> extends TypeaheadPropsAndState<Option> {
   hideMenu: () => void;
   inputNode: HTMLInputElement | null;
   inputRef: RefCallback<HTMLInputElement>;
   isMenuShown: boolean;
-  onActiveItemChange: OptionHandler;
-  onAdd: OptionHandler;
+  onActiveItemChange: OptionHandler<Option>;
+  onAdd: OptionHandler<Option>;
   onChange: ChangeEventHandler<HTMLInputElement>;
   onClear: () => void;
   onClick: MouseEventHandler<HTMLInputElement>;
   onHide: () => void;
   onInitialItemChange: (option?: Option) => void;
   onMenuItemClick: (option: Option, event: SelectEvent<HTMLElement>) => void;
-  onRemove: OptionHandler;
+  onRemove: OptionHandler<Option>;
   placeholder?: string;
   results: Option[];
   setItem: (item: Option, position: number) => void;
diff --git a/src/utils/addCustomOption.ts b/src/utils/addCustomOption.ts
index e2f991f1..fff7dbbd 100644
--- a/src/utils/addCustomOption.ts
+++ b/src/utils/addCustomOption.ts
@@ -1,11 +1,11 @@
 import getOptionLabel from './getOptionLabel';
 import { isFunction } from './nodash';
 
-import { Option, TypeaheadPropsAndState } from '../types';
+import { OptionType, TypeaheadPropsAndState } from '../types';
 
-function addCustomOption(
+function addCustomOption<Option extends OptionType>(
   results: Option[],
-  props: TypeaheadPropsAndState
+  props: TypeaheadPropsAndState<Option>
 ): boolean {
   const { allowNew, labelKey, text } = props;
 
diff --git a/src/utils/defaultFilterBy.ts b/src/utils/defaultFilterBy.ts
index 7326b88a..2214cd54 100644
--- a/src/utils/defaultFilterBy.ts
+++ b/src/utils/defaultFilterBy.ts
@@ -5,19 +5,19 @@ import { isFunction, isString } from './nodash';
 import stripDiacritics from './stripDiacritics';
 import warn from './warn';
 
-import type { LabelKey, Option } from '../types';
+import type { LabelKey, OptionType } from '../types';
 
-interface Props {
+interface Props<Option extends OptionType> {
   caseSensitive: boolean;
   filterBy: string[];
   ignoreDiacritics: boolean;
-  labelKey: LabelKey;
+  labelKey: LabelKey<Option>;
   multiple: boolean;
   selected: Option[];
   text: string;
 }
 
-function isMatch(input: string, string: string, props: Props): boolean {
+function isMatch<Option extends OptionType>(input: string, string: string, props: Props<Option>): boolean {
   let searchStr = input;
   let str = string;
 
@@ -37,7 +37,7 @@ function isMatch(input: string, string: string, props: Props): boolean {
 /**
  * Default algorithm for filtering results.
  */
-export default function defaultFilterBy(option: Option, props: Props): boolean {
+export default function defaultFilterBy<Option extends OptionType>(option: Option, props: Props<Option>): boolean {
   const { filterBy, labelKey, multiple, selected, text } = props;
 
   // Don't show selected options in the menu for the multi-select case.
diff --git a/src/utils/getHintText.ts b/src/utils/getHintText.ts
index 1648dd18..d57812e5 100644
--- a/src/utils/getHintText.ts
+++ b/src/utils/getHintText.ts
@@ -3,20 +3,20 @@ import getOptionLabel from './getOptionLabel';
 import hasOwnProperty from './hasOwnProperty';
 import { isString } from './nodash';
 
-import { LabelKey, Option } from '../types';
+import { LabelKey, OptionType } from '../types';
 
-interface HintProps {
+interface HintProps<Option extends OptionType> {
   activeIndex: number;
   initialItem?: Option;
   isFocused: boolean;
   isMenuShown: boolean;
-  labelKey: LabelKey;
+  labelKey: LabelKey<Option>;
   multiple: boolean;
   selected: Option[];
   text: string;
 }
 
-function getHintText({
+function getHintText<Option extends OptionType>({
   activeIndex,
   initialItem,
   isFocused,
@@ -25,7 +25,7 @@ function getHintText({
   multiple,
   selected,
   text,
-}: HintProps) {
+}: HintProps<Option>) {
   // Don't display a hint under the following conditions:
   if (
     // No text entered.
diff --git a/src/utils/getInputProps.ts b/src/utils/getInputProps.ts
index fb8bc586..fec9b706 100644
--- a/src/utils/getInputProps.ts
+++ b/src/utils/getInputProps.ts
@@ -2,10 +2,10 @@ import cx from 'classnames';
 
 import getMenuItemId from './getMenuItemId';
 import hasOwnProperty from './hasOwnProperty';
-import { TypeaheadManagerProps } from '../types';
+import {OptionType, TypeaheadManagerProps} from '../types';
 
-type Args = Pick<
-  TypeaheadManagerProps,
+type Args<Option extends OptionType> = Pick<
+  TypeaheadManagerProps<Option>,
   | 'activeIndex'
   | 'id'
   | 'isFocused'
@@ -17,7 +17,7 @@ type Args = Pick<
 >;
 
 const getInputProps =
-  ({
+  <Option extends OptionType>({
     activeIndex,
     id,
     isFocused,
@@ -27,7 +27,7 @@ const getInputProps =
     onFocus,
     placeholder,
     ...props
-  }: Args) =>
+  }: Args<Option>) =>
   (inputProps = {}) => {
     const className = hasOwnProperty(inputProps, 'className')
       ? String(inputProps.className)
diff --git a/src/utils/getInputText.ts b/src/utils/getInputText.ts
index bec854c7..34c76e02 100644
--- a/src/utils/getInputText.ts
+++ b/src/utils/getInputText.ts
@@ -1,15 +1,15 @@
 import getOptionLabel from './getOptionLabel';
-import { LabelKey, Option } from '../types';
+import { LabelKey, OptionType } from '../types';
 
-interface Props {
+interface Props<Option extends OptionType> {
   activeItem?: Option;
-  labelKey: LabelKey;
+  labelKey: LabelKey<Option>;
   multiple: boolean;
   selected: Option[];
   text: string;
 }
 
-function getInputText(props: Props): string {
+function getInputText<Option extends OptionType>(props: Props<Option>): string {
   const { activeItem, labelKey, multiple, selected, text } = props;
 
   if (activeItem) {
diff --git a/src/utils/getIsOnlyResult.ts b/src/utils/getIsOnlyResult.ts
index 1a7edebe..cb1cf61d 100644
--- a/src/utils/getIsOnlyResult.ts
+++ b/src/utils/getIsOnlyResult.ts
@@ -1,14 +1,14 @@
 import getOptionProperty from './getOptionProperty';
 
-import { AllowNew, Option } from '../types';
+import { AllowNew, OptionType } from '../types';
 
-interface Props {
-  allowNew: AllowNew;
+interface Props<Option extends OptionType> {
+  allowNew: AllowNew<Option>;
   highlightOnlyResult: boolean;
   results: Option[];
 }
 
-function getIsOnlyResult(props: Props): boolean {
+function getIsOnlyResult<Option extends OptionType>(props: Props<Option>): boolean {
   const { allowNew, highlightOnlyResult, results } = props;
 
   if (!highlightOnlyResult || allowNew) {
diff --git a/src/utils/getOptionLabel.ts b/src/utils/getOptionLabel.ts
index b72b3156..9185432c 100644
--- a/src/utils/getOptionLabel.ts
+++ b/src/utils/getOptionLabel.ts
@@ -4,14 +4,14 @@ import getStringLabelKey from './getStringLabelKey';
 import hasOwnProperty from './hasOwnProperty';
 import { isFunction, isString } from './nodash';
 
-import type { LabelKey, Option } from '../types';
+import type { LabelKey, OptionType } from '../types';
 
 /**
  * Retrieves the display string from an option. Options can be the string
  * themselves, or an object with a defined display string. Anything else throws
  * an error.
  */
-function getOptionLabel(option: Option, labelKey: LabelKey): string {
+function getOptionLabel<Option extends OptionType>(option: Option, labelKey: LabelKey<Option>): string {
   // Handle internally created options first.
   if (
     !isString(option) &&
diff --git a/src/utils/getOptionProperty.ts b/src/utils/getOptionProperty.ts
index 0ed469f7..b4a0fa84 100644
--- a/src/utils/getOptionProperty.ts
+++ b/src/utils/getOptionProperty.ts
@@ -1,7 +1,7 @@
 import { isString } from './nodash';
-import { Option } from '../types';
+import { OptionType } from '../types';
 
-export default function getOptionProperty(option: Option, key: string) {
+export default function getOptionProperty<Option extends OptionType>(option: Option, key: string) {
   if (isString(option)) {
     return undefined;
   }
diff --git a/src/utils/getStringLabelKey.ts b/src/utils/getStringLabelKey.ts
index 2bdb9674..56642dd1 100644
--- a/src/utils/getStringLabelKey.ts
+++ b/src/utils/getStringLabelKey.ts
@@ -1,6 +1,7 @@
 import { DEFAULT_LABELKEY } from '../constants';
 import type { LabelKey } from '../types';
+import {OptionType} from "../types";
 
-export default function getStringLabelKey(labelKey: LabelKey): string {
+export default function getStringLabelKey<Option extends OptionType>(labelKey: LabelKey<Option>): string {
   return typeof labelKey === 'string' ? labelKey : DEFAULT_LABELKEY;
 }
diff --git a/src/utils/getTruncatedOptions.ts b/src/utils/getTruncatedOptions.ts
index 31d2c2c9..c2f8212a 100644
--- a/src/utils/getTruncatedOptions.ts
+++ b/src/utils/getTruncatedOptions.ts
@@ -1,9 +1,9 @@
-import { Option } from '../types';
+import { OptionType } from '../types';
 
 /**
  * Truncates the result set based on `maxResults` and returns the new set.
  */
-function getTruncatedOptions(options: Option[], maxResults: number): Option[] {
+function getTruncatedOptions<Option extends OptionType>(options: Option[], maxResults: number): Option[] {
   if (!maxResults || maxResults >= options.length) {
     return options;
   }
diff --git a/src/utils/getUpdatedActiveIndex.ts b/src/utils/getUpdatedActiveIndex.ts
index 92d66462..eac282db 100644
--- a/src/utils/getUpdatedActiveIndex.ts
+++ b/src/utils/getUpdatedActiveIndex.ts
@@ -1,15 +1,15 @@
-import type { Option } from '../types';
+import type { OptionType } from '../types';
 import { isString } from './nodash';
 import hasOwnProperty from './hasOwnProperty';
 
 type Key = 'ArrowDown' | 'ArrowUp';
 
-export function isDisabledOption(index: number, items: Option[]): boolean {
+export function isDisabledOption<Option extends OptionType>(index: number, items: Option[]): boolean {
   const option = items[index];
   return !!option && !isString(option) && hasOwnProperty(option, 'disabled');
 }
 
-export function skipDisabledOptions(
+export function skipDisabledOptions<Option extends OptionType>(
   currentIndex: number,
   key: Key,
   items: Option[]
@@ -23,7 +23,7 @@ export function skipDisabledOptions(
   return newIndex;
 }
 
-export default function getUpdatedActiveIndex(
+export default function getUpdatedActiveIndex<Option extends OptionType>(
   currentIndex: number,
   key: Key,
   items: Option[]
diff --git a/src/utils/nodash.test.ts b/src/utils/nodash.test.ts
index 97bb7429..cf2b1406 100644
--- a/src/utils/nodash.test.ts
+++ b/src/utils/nodash.test.ts
@@ -1,4 +1,4 @@
-import { isFunction, isString, noop, pick, uniqueId } from './nodash';
+import {isFunction, isString, noop, once, pick, uniqueId} from './nodash';
 
 const arr: string[] = [];
 const fn = noop;
@@ -35,4 +35,18 @@ describe('nodash', () => {
     expect(uniqueId()).toBe('1');
     expect(uniqueId('foo-')).toBe('foo-2');
   });
+
+  test('once', () =>{
+    const myFunc = jest.fn((a: number) => a);
+
+    const onlyOnce = once(myFunc)
+
+    let result = -100;
+    for (let i = 0; i < 100; i++) {
+      result = onlyOnce(i)
+    }
+
+    expect(myFunc).toBeCalledTimes(1)
+    expect(result).toBe(0)
+  })
 });
diff --git a/src/utils/nodash.ts b/src/utils/nodash.ts
index b80a52bb..9770b7ab 100644
--- a/src/utils/nodash.ts
+++ b/src/utils/nodash.ts
@@ -25,3 +25,17 @@ export function uniqueId(prefix?: string): string {
   idCounter += 1;
   return (prefix == null ? '' : String(prefix)) + idCounter;
 }
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const once = <T extends (...args: any) => any>(func: T): T => {
+  let called = false;
+  let result: unknown;
+  // @ts-ignore
+  return (...args) => {
+    if (!called) {
+      result = func(...args)
+      called = true;
+    }
+    return result
+  }
+}
diff --git a/src/utils/validateSelectedPropChange.ts b/src/utils/validateSelectedPropChange.ts
index 11c54a8c..382a955c 100644
--- a/src/utils/validateSelectedPropChange.ts
+++ b/src/utils/validateSelectedPropChange.ts
@@ -1,8 +1,8 @@
 import warn from './warn';
 
-import type { Option } from '../types';
+import type { OptionType } from '../types';
 
-export default function validateSelectedPropChange(
+export default function validateSelectedPropChange<Option extends OptionType>(
   prevSelected?: Option[],
   selected?: Option[]
 ): void {