diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9bcc7ed21e7..9fca531bc43 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 - `<RegionSelect />` can now dynamically get country flag and group all countrys #8996
 
 ### Fixed:
+- Typesafety of the `<Select />` component #8986
 - Clear the Kubernetes Delete Dialog when it is re-opened #9000
 
 ### Tech Stories:
diff --git a/packages/manager/src/GoTo.tsx b/packages/manager/src/GoTo.tsx
index 4290022d50d..cc1a4c73467 100644
--- a/packages/manager/src/GoTo.tsx
+++ b/packages/manager/src/GoTo.tsx
@@ -178,7 +178,6 @@ const GoTo: React.FC<CombinedProps> = (props) => {
           openMenuOnClick={false}
           isClearable={false}
           isMulti={false}
-          value={false}
           menuIsOpen={true}
         />
       </div>
diff --git a/packages/manager/src/components/EnhancedSelect/EnhancedSelect.stories.mdx b/packages/manager/src/components/EnhancedSelect/EnhancedSelect.stories.mdx
index 405fdc7c1b7..e04f7b87d7d 100644
--- a/packages/manager/src/components/EnhancedSelect/EnhancedSelect.stories.mdx
+++ b/packages/manager/src/components/EnhancedSelect/EnhancedSelect.stories.mdx
@@ -54,7 +54,7 @@ export const SelectTemplate = (args) => {
     <div id="drop-down-story">
       <Select
         onChange={onSelect}
-        createNew={create}
+        onCreateOption={create}
         value={isMulti ? selectedItems : selectedItem}
         {...args}
       />
diff --git a/packages/manager/src/components/EnhancedSelect/Select.styles.ts b/packages/manager/src/components/EnhancedSelect/Select.styles.ts
index 36eddbd1c2a..3dc88dd5a7b 100644
--- a/packages/manager/src/components/EnhancedSelect/Select.styles.ts
+++ b/packages/manager/src/components/EnhancedSelect/Select.styles.ts
@@ -1,345 +1,318 @@
-import { createStyles } from '@mui/styles';
+import { makeStyles } from '@mui/styles';
 import { Theme } from '@mui/material/styles';
 
-export type ClassNames =
-  | 'root'
-  | 'input'
-  | 'noOptionsMessage'
-  | 'divider'
-  | 'suggestionRoot'
-  | 'highlight'
-  | 'suggestionItem'
-  | 'suggestionIcon'
-  | 'suggestionTitle'
-  | 'suggestionDescription'
-  | 'resultContainer'
-  | 'tagContainer'
-  | 'selectedMenuItem'
-  | 'medium'
-  | 'small'
-  | 'noMarginTop'
-  | 'inline'
-  | 'hideLabel'
-  | 'algoliaRoot'
-  | 'label'
-  | 'source'
-  | 'icon'
-  | 'row'
-  | 'finalLink';
-
-export const styles = (theme: Theme) =>
-  createStyles({
-    '@keyframes dash': {
-      to: {
-        'stroke-dashoffset': 0,
-      },
+export const useStyles = makeStyles((theme: Theme) => ({
+  '@keyframes dash': {
+    to: {
+      'stroke-dashoffset': 0,
     },
-    root: {
-      width: '100%',
-      position: 'relative',
-      '& .react-select__control': {
-        borderRadius: 0,
-        boxShadow: 'none',
-        border: `1px solid transparent`,
-        backgroundColor: theme.bg.white,
-        minHeight: `calc(${theme.spacing(5)} - 2)`,
-        '&:hover': {
-          border: `1px dotted #ccc`,
-          cursor: 'text',
-        },
-        '&--is-focused, &--is-focused:hover': {
-          border: `1px dotted #999`,
-        },
+  },
+  root: {
+    width: '100%',
+    position: 'relative',
+    '& .react-select__control': {
+      borderRadius: 0,
+      boxShadow: 'none',
+      border: `1px solid transparent`,
+      backgroundColor: theme.bg.white,
+      minHeight: `calc(${theme.spacing(5)} - 2)`,
+      '&:hover': {
+        border: `1px dotted #ccc`,
+        cursor: 'text',
       },
-      '& .react-select__value-container': {
-        width: '100%',
-        '& > div': {
-          width: '100%',
-        },
-        '&.react-select__value-container--is-multi': {
-          '& > div, & .react-select__input': {
-            width: 'auto',
-          },
-        },
+      '&--is-focused, &--is-focused:hover': {
+        border: `1px dotted #999`,
       },
-      '& .react-select__input': {
+    },
+    '& .react-select__value-container': {
+      width: '100%',
+      '& > div': {
         width: '100%',
-        color: theme.palette.text.primary,
-      },
-      '& .react-select__menu': {
-        margin: '-1px 0 0 0',
-        borderRadius: 0,
-        boxShadow: 'none',
-        border: `1px solid ${theme.palette.primary.main}`,
-        maxWidth: 415,
-        zIndex: 100,
       },
-      '& .react-select__group': {
-        width: '100%',
-        '&:last-child': {
-          paddingBottom: 0,
+      '&.react-select__value-container--is-multi': {
+        '& > div, & .react-select__input': {
+          width: 'auto',
         },
       },
-      '& .react-select__group-heading': {
-        textTransform: 'initial',
-        fontSize: '1rem',
-        color: theme.color.headline,
-        fontFamily: theme.font.bold,
-        paddingLeft: 10,
-        paddingRight: 10,
-      },
-      '& .react-select__menu-list': {
-        zIndex: 100,
-        padding: theme.spacing(0.5),
-        backgroundColor: theme.bg.white,
-        height: '101%',
-        overflow: 'auto',
-        maxHeight: 285,
-        '&::-webkit-scrollbar': {
-          appearance: 'none',
-        },
-        '&::-webkit-scrollbar:vertical': {
-          width: 8,
-        },
-        '&::-webkit-scrollbar-thumb': {
-          borderRadius: 8,
-          backgroundColor: '#ccc',
-        },
-      },
-      '& .react-select__option': {
-        transition: theme.transitions.create(['background-color', 'color']),
-        color: theme.palette.text.primary,
-        backgroundColor: theme.bg.white,
-        cursor: 'pointer',
-        padding: '10px',
-        fontSize: '0.9rem',
-        [theme.breakpoints.only('xs')]: {
-          fontSize: '1rem',
-        },
-        '& svg': {
-          marginTop: 2,
-        },
-      },
-      '& .react-select__option--is-focused': {
-        backgroundColor: theme.palette.primary.main,
-        color: 'white',
-      },
-      '& .react-select__option--is-selected': {
-        color: theme.palette.primary.main,
-        '&.react-select__option--is-focused': {
-          backgroundColor: theme.bg.white,
-        },
-      },
-      '& .react-select__option--is-disabled': {
-        opacity: 0.5,
-        cursor: 'initial',
-      },
-      '& .react-select__single-value': {
-        color: theme.palette.text.primary,
-        overflow: 'hidden',
-      },
-      '& .react-select__indicator-separator': {
-        display: 'none',
-      },
-      '& .react-select__multi-value': {
-        borderRadius: 4,
-        backgroundColor: theme.bg.lightBlue1,
-        alignItems: 'center',
-      },
-      '& .react-select__multi-value__label': {
-        color: theme.palette.text.primary,
-        fontSize: '.8rem',
-        height: 20,
-        marginTop: 2,
-        marginBottom: 2,
-        marginRight: 4,
-        paddingLeft: 6,
-        paddingRight: 0,
+    },
+    '& .react-select__input': {
+      width: '100%',
+      color: theme.palette.text.primary,
+    },
+    '& .react-select__menu': {
+      margin: '-1px 0 0 0',
+      borderRadius: 0,
+      boxShadow: 'none',
+      border: `1px solid ${theme.palette.primary.main}`,
+      maxWidth: 415,
+      zIndex: 100,
+    },
+    '& .react-select__group': {
+      width: '100%',
+      '&:last-child': {
+        paddingBottom: 0,
       },
-      '& .react-select__clear-indicator': {
-        padding: 0,
-        '& svg': {
-          color: theme.color.grey4,
-          '&:hover': {
-            color: theme.palette.primary.main,
-          },
-        },
+    },
+    '& .react-select__group-heading': {
+      textTransform: 'initial',
+      fontSize: '1rem',
+      color: theme.color.headline,
+      fontFamily: theme.font.bold,
+      paddingLeft: 10,
+      paddingRight: 10,
+    },
+    '& .react-select__menu-list': {
+      zIndex: 100,
+      padding: theme.spacing(0.5),
+      backgroundColor: theme.bg.white,
+      height: '101%',
+      overflow: 'auto',
+      maxHeight: 285,
+      '&::-webkit-scrollbar': {
+        appearance: 'none',
       },
-      '& .react-select__multi-value__remove': {
-        backgroundColor: 'transparent',
-        borderRadius: '50%',
-        padding: 2,
-        marginLeft: 4,
-        marginRight: 4,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        '& svg': {
-          color: theme.palette.text.primary,
-          width: 12,
-          height: 12,
-        },
-        '&:hover': {
-          backgroundColor: theme.palette.primary.main,
-          '& svg': {
-            color: 'white',
-          },
-        },
+      '&::-webkit-scrollbar:vertical': {
+        width: 8,
       },
-      '& .react-select__dropdown-indicator': {},
-      '& [class*="MuiFormHelperText-error"]': {
-        paddingBottom: theme.spacing(1),
+      '&::-webkit-scrollbar-thumb': {
+        borderRadius: 8,
+        backgroundColor: '#ccc',
       },
     },
-    input: {
+    '& .react-select__option': {
+      transition: theme.transitions.create(['background-color', 'color']),
+      color: theme.palette.text.primary,
+      backgroundColor: theme.bg.white,
+      cursor: 'pointer',
+      padding: '10px',
       fontSize: '0.9rem',
       [theme.breakpoints.only('xs')]: {
         fontSize: '1rem',
       },
-      padding: 0,
-      display: 'flex',
-      color: theme.palette.text.primary,
-      cursor: 'pointer',
-      minHeight: `calc(${theme.spacing(5)} - 6)`,
-      // From the AutoSizeInput documentation: (https://github.com/JedWatson/react-input-autosize/blob/master/README.md#csp-and-the-ie-clear-indicator)
-      // "The input will automatically inject a stylesheet that hides IE/Edge's "clear" indicator,
-      // which otherwise breaks the UI. This has the downside of being incompatible with some CSP policies.
-      // To work around this, you can pass the injectStyles={false} prop, but if you do this I strongly
-      // recommend targeting the input element in your own stylesheet with the following rule:"
-      '::-ms-clear': { display: 'none' },
-    },
-    noOptionsMessage: {
-      padding: `${theme.spacing(1)} ${theme.spacing(2)}`,
+      '& svg': {
+        marginTop: 2,
+      },
     },
-    divider: {
-      height: theme.spacing(2),
+    '& .react-select__option--is-focused': {
+      backgroundColor: theme.palette.primary.main,
+      color: 'white',
     },
-    suggestionRoot: {
-      cursor: 'pointer',
-      width: 'calc(100% + 2px)',
-      alignItems: 'space-between',
-      justifyContent: 'space-between',
-      borderBottom: `1px solid ${theme.palette.divider}`,
-      [theme.breakpoints.up('md')]: {
-        display: 'flex',
-      },
-      '&:last-child': {
-        borderBottom: 0,
+    '& .react-select__option--is-selected': {
+      color: theme.palette.primary.main,
+      '&.react-select__option--is-focused': {
+        backgroundColor: theme.bg.white,
       },
     },
-    highlight: {
-      color: theme.palette.primary.main,
+    '& .react-select__option--is-disabled': {
+      opacity: 0.5,
+      cursor: 'initial',
     },
-    suggestionItem: {
-      padding: theme.spacing(),
+    '& .react-select__single-value': {
+      color: theme.palette.text.primary,
+      overflow: 'hidden',
     },
-    suggestionIcon: {
-      display: 'flex',
+    '& .react-select__indicator-separator': {
+      display: 'none',
+    },
+    '& .react-select__multi-value': {
+      borderRadius: 4,
+      backgroundColor: theme.bg.lightBlue1,
       alignItems: 'center',
-      justifyContent: 'center',
-      marginLeft: theme.spacing(1.5),
     },
-    suggestionTitle: {
-      fontSize: '1rem',
+    '& .react-select__multi-value__label': {
       color: theme.palette.text.primary,
-      wordBreak: 'break-all',
-      fontWeight: 600,
-    },
-    suggestionDescription: {
-      color: theme.color.headline,
-      fontSize: '.75rem',
+      fontSize: '.8rem',
+      height: 20,
       marginTop: 2,
+      marginBottom: 2,
+      marginRight: 4,
+      paddingLeft: 6,
+      paddingRight: 0,
     },
-    resultContainer: {
-      display: 'flex',
-      flexFlow: 'row nowrap',
+    '& .react-select__clear-indicator': {
+      padding: 0,
+      '& svg': {
+        color: theme.color.grey4,
+        '&:hover': {
+          color: theme.palette.primary.main,
+        },
+      },
     },
-    tagContainer: {
+    '& .react-select__multi-value__remove': {
+      backgroundColor: 'transparent',
+      borderRadius: '50%',
+      padding: 2,
+      marginLeft: 4,
+      marginRight: 4,
       display: 'flex',
-      flexWrap: 'wrap',
-      paddingRight: 8,
-      justifyContent: 'flex-end',
       alignItems: 'center',
-      '& > div': {
-        margin: '2px',
-      },
-    },
-    selectedMenuItem: {
-      backgroundColor: `${theme.bg.main} !important`,
-      '& .tag': {
-        backgroundColor: theme.bg.lightBlue1,
+      justifyContent: 'center',
+      '& svg': {
         color: theme.palette.text.primary,
-        '&:hover': {
-          backgroundColor: theme.palette.primary.main,
+        width: 12,
+        height: 12,
+      },
+      '&:hover': {
+        backgroundColor: theme.palette.primary.main,
+        '& svg': {
           color: 'white',
         },
       },
     },
-    medium: {
-      minHeight: 40,
+    '& .react-select__dropdown-indicator': {},
+    '& [class*="MuiFormHelperText-error"]': {
+      paddingBottom: theme.spacing(1),
     },
-    small: {
-      minHeight: 35,
-      minWidth: 'auto',
+  },
+  input: {
+    fontSize: '0.9rem',
+    [theme.breakpoints.only('xs')]: {
+      fontSize: '1rem',
     },
-    inline: {
-      display: 'inline-flex',
-      flexDirection: 'row',
-      alignItems: 'center',
-      '& label': {
-        marginRight: theme.spacing(1),
-        whiteSpace: 'nowrap',
-        position: 'relative',
-        top: 1,
-      },
+    padding: 0,
+    display: 'flex',
+    color: theme.palette.text.primary,
+    cursor: 'pointer',
+    minHeight: `calc(${theme.spacing(5)} - 6)`,
+    // From the AutoSizeInput documentation: (https://github.com/JedWatson/react-input-autosize/blob/master/README.md#csp-and-the-ie-clear-indicator)
+    // "The input will automatically inject a stylesheet that hides IE/Edge's "clear" indicator,
+    // which otherwise breaks the UI. This has the downside of being incompatible with some CSP policies.
+    // To work around this, you can pass the injectStyles={false} prop, but if you do this I strongly
+    // recommend targeting the input element in your own stylesheet with the following rule:"
+    '::-ms-clear': { display: 'none' },
+  },
+  noOptionsMessage: {
+    padding: `${theme.spacing(1)} ${theme.spacing(2)}`,
+  },
+  divider: {
+    height: theme.spacing(2),
+  },
+  suggestionRoot: {
+    cursor: 'pointer',
+    width: 'calc(100% + 2px)',
+    alignItems: 'space-between',
+    justifyContent: 'space-between',
+    borderBottom: `1px solid ${theme.palette.divider}`,
+    [theme.breakpoints.up('md')]: {
+      display: 'flex',
     },
-    hideLabel: {
-      '& label': { ...theme.visually.hidden },
+    '&:last-child': {
+      borderBottom: 0,
     },
-    algoliaRoot: {
-      width: '100%',
-      cursor: 'pointer',
-      padding: `calc(${theme.spacing(1)} / 2 + 2)`,
-      '& em': {
-        fontStyle: 'normal',
-        color: theme.color.blueDTwhite,
-      },
+  },
+  highlight: {
+    color: theme.palette.primary.main,
+  },
+  suggestionItem: {
+    padding: theme.spacing(),
+  },
+  suggestionIcon: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginLeft: theme.spacing(1.5),
+  },
+  suggestionTitle: {
+    fontSize: '1rem',
+    color: theme.palette.text.primary,
+    wordBreak: 'break-all',
+    fontWeight: 600,
+  },
+  suggestionDescription: {
+    color: theme.color.headline,
+    fontSize: '.75rem',
+    marginTop: 2,
+  },
+  resultContainer: {
+    display: 'flex',
+    flexFlow: 'row nowrap',
+  },
+  tagContainer: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    paddingRight: 8,
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    '& > div': {
+      margin: '2px',
     },
-    label: {
-      display: 'inline',
+  },
+  selectedMenuItem: {
+    backgroundColor: `${theme.bg.main} !important`,
+    '& .tag': {
+      backgroundColor: theme.bg.lightBlue1,
       color: theme.palette.text.primary,
-      maxWidth: '95%',
+      '&:hover': {
+        backgroundColor: theme.palette.primary.main,
+        color: 'white',
+      },
     },
-    icon: {
-      display: 'inline-block',
-      width: 12,
-      height: 12,
+  },
+  medium: {
+    minHeight: 40,
+  },
+  small: {
+    minHeight: 35,
+    minWidth: 'auto',
+  },
+  inline: {
+    display: 'inline-flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    '& label': {
+      marginRight: theme.spacing(1),
+      whiteSpace: 'nowrap',
       position: 'relative',
-      top: 5,
-      marginLeft: theme.spacing(0.5),
-      marginRight: theme.spacing(0.5),
-      color: theme.palette.primary.main,
-    },
-    source: {
-      marginTop: `calc(${theme.spacing(1)} / 4)`,
-      color: theme.color.headline,
-      paddingLeft: theme.spacing(1),
-      margin: 0,
-    },
-    row: {
-      display: 'flex',
-      width: '100%',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      paddingLeft: theme.spacing(1),
+      top: 1,
     },
-    finalLink: {
-      display: 'flex',
-      alignItems: 'center',
-      fontSize: '1.2em',
-      paddingLeft: theme.spacing(1),
+  },
+  hideLabel: {
+    '& label': { ...theme.visually.hidden },
+  },
+  algoliaRoot: {
+    width: '100%',
+    cursor: 'pointer',
+    padding: `calc(${theme.spacing(1)} / 2 + 2)`,
+    '& em': {
+      fontStyle: 'normal',
+      color: theme.color.blueDTwhite,
     },
-  });
+  },
+  label: {
+    display: 'inline',
+    color: theme.palette.text.primary,
+    maxWidth: '95%',
+  },
+  icon: {
+    display: 'inline-block',
+    width: 12,
+    height: 12,
+    position: 'relative',
+    top: 5,
+    marginLeft: theme.spacing(0.5),
+    marginRight: theme.spacing(0.5),
+    color: theme.palette.primary.main,
+  },
+  source: {
+    marginTop: `calc(${theme.spacing(1)} / 4)`,
+    color: theme.color.headline,
+    paddingLeft: theme.spacing(1),
+    margin: 0,
+  },
+  row: {
+    display: 'flex',
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingLeft: theme.spacing(1),
+  },
+  finalLink: {
+    display: 'flex',
+    alignItems: 'center',
+    fontSize: '1.2em',
+    paddingLeft: theme.spacing(1),
+  },
+}));
 
 // @todo @tdt: Replace the class name based styles above with these. They're (mostly) copied over,
 // as they're needed for one specific case: where a Select component appears on a Dialog. To reduce
diff --git a/packages/manager/src/components/EnhancedSelect/Select.tsx b/packages/manager/src/components/EnhancedSelect/Select.tsx
index 3e4d3a4a7e2..1cc43122ae1 100644
--- a/packages/manager/src/components/EnhancedSelect/Select.tsx
+++ b/packages/manager/src/components/EnhancedSelect/Select.tsx
@@ -1,14 +1,15 @@
-import classNames from 'classnames';
 import * as React from 'react';
-import ReactSelect, { Props as SelectProps } from 'react-select';
+import classNames from 'classnames';
+import ReactSelect, {
+  ActionMeta,
+  NamedProps as SelectProps,
+  ValueType,
+} from 'react-select';
 import CreatableSelect, {
-  Props as CreatableSelectProps,
+  CreatableProps as CreatableSelectProps,
 } from 'react-select/creatable';
-import { withStyles, WithStyles, withTheme, WithTheme } from '@mui/styles';
 import { Props as TextFieldProps } from 'src/components/TextField';
 import { convertToKebabCase } from 'src/utilities/convertToKebobCase';
-/* TODO will be refactoring enhanced select to be an abstraction.
-Styles added in this file and the below imports will be utilized for the abstraction. */
 import DropdownIndicator from './components/DropdownIndicator';
 import Input from './components/Input';
 import LoadingIndicator from './components/LoadingIndicator';
@@ -19,7 +20,8 @@ import NoOptionsMessage from './components/NoOptionsMessage';
 import Option from './components/Option';
 import Control from './components/SelectControl';
 import Placeholder from './components/SelectPlaceholder';
-import { ClassNames, styles, reactSelectStyles } from './Select.styles';
+import { reactSelectStyles, useStyles } from './Select.styles';
+import { Theme, useTheme } from '@mui/material';
 
 export interface Item<T = string | number, L = string> {
   value: T;
@@ -32,17 +34,6 @@ export interface GroupType<T = string | number> {
   options: Item<T>[];
 }
 
-export interface SelectState {
-  data: any;
-  isDisabled: boolean;
-  isFocused: boolean;
-  isSelected: boolean;
-}
-
-interface ActionMeta {
-  action: string;
-}
-
 export interface NoOptionsMessageProps {
   inputValue: string;
 }
@@ -62,26 +53,18 @@ const _components = {
   Input,
 };
 
-interface OwnProps {
-  // Set this prop to `true` when using a <Select /> on a modal. It attaches the <Select /> to the
-  // document body directly, so the overflow is visible over the edge of the modal.
-  overflowPortal?: boolean;
-}
-
-type CombinedProps = OwnProps &
-  WithStyles<ClassNames> &
-  BaseSelectProps &
-  CreatableProps &
-  WithTheme;
-
 // We extend TexFieldProps to still be able to pass
 // the required label to Select and not duplicated it to TextFieldProps
 interface ModifiedTextFieldProps extends Omit<TextFieldProps, 'label'> {
   label?: string;
 }
 
-export interface BaseSelectProps
-  extends Omit<SelectProps<any>, 'onChange' | 'value' | 'onFocus'> {
+export interface BaseSelectProps<
+  I extends Item,
+  IsMulti extends boolean = false,
+  Clearable extends boolean = false
+> extends Omit<SelectProps<I, IsMulti>, 'onChange'>,
+    CreatableSelectProps<I, IsMulti> {
   classes?: any;
   /*
    textFieldProps isn't native to react-select
@@ -97,18 +80,18 @@ export interface BaseSelectProps
   /**
    * We require label for accessibility purpose
    */
-  label: string;
-  /** alias for isDisabled */
-  disabled?: boolean;
-  /** retyped this */
-  value?: Item | Item[] | null;
-  /** making this required */
-  onChange: (selected: Item | Item[] | null, actionMeta?: ActionMeta) => void;
-  /** alias for onCreateOption */
-  createNew?: (inputValue: string) => void;
-  loadOptions?: (inputValue: string) => Promise<Item | Item[]> | undefined;
-  onFocus?: any;
+  label?: string;
+
+  /** onChange is called when the user selectes a new value / new values */
+  onChange: Clearable extends true // if the Select is NOT clearable, the value passed in the onChange function must be defined
+    ? Exclude<SelectProps<I, IsMulti>['onChange'], undefined>
+    : (
+        value: Exclude<ValueType<I, IsMulti>, null | undefined>,
+        action: ActionMeta<I>
+      ) => void;
+
   /** the rest are props we've added ourselves */
+  disabled?: boolean;
   medium?: boolean;
   small?: boolean;
   noMarginTop?: boolean;
@@ -120,11 +103,54 @@ export interface BaseSelectProps
   required?: boolean;
   creatable?: boolean;
   variant?: 'creatable';
+  isClearable?: Clearable;
+  // Set this prop to `true` when using a <Select /> on a modal. It attaches the <Select /> to the
+  // document body directly, so the overflow is visible over the edge of the modal.
+  overflowPortal?: boolean;
 }
 
-interface CreatableProps extends CreatableSelectProps<any, any> {}
+const Select = <
+  I extends Item,
+  IsMulti extends boolean = false,
+  Clearable extends boolean = false
+>(
+  props: BaseSelectProps<I, IsMulti, Clearable>
+) => {
+  const theme = useTheme<Theme>();
+  const classes = useStyles();
+  const {
+    className,
+    components,
+    errorText,
+    filterOption,
+    label,
+    isClearable,
+    isMulti,
+    isLoading,
+    placeholder,
+    onChange,
+    onInputChange,
+    options,
+    value,
+    noOptionsMessage,
+    onMenuClose,
+    onBlur,
+    blurInputOnSelect,
+    medium,
+    small,
+    noMarginTop,
+    textFieldProps,
+    inline,
+    hideLabel,
+    errorGroup,
+    onFocus,
+    inputId,
+    overflowPortal,
+    required,
+    creatable,
+    ...restOfProps
+  } = props;
 
-class Select extends React.PureComponent<CombinedProps, {}> {
   // React-Select changed the behavior of clearing isMulti Selects in v3.
   // Previously, once the Select was empty, the value was `[]`. Now, it is `null`.
   // This breaks many of our components, which rely on e.g. mapping through the value (which is
@@ -132,157 +158,112 @@ class Select extends React.PureComponent<CombinedProps, {}> {
   //
   // This essentially reverts the behavior of the v3 React-Select update. Long term, we should
   // probably re-write our component handlers to expect EITHER an array OR `null`.
-  _onChange = (selected: Item | Item[] | null, actionMeta?: ActionMeta) => {
-    const { isMulti, onChange } = this.props;
-
+  const _onChange = (
+    selected: ValueType<I, IsMulti>,
+    actionMeta: ActionMeta<I>
+  ) => {
     if (isMulti && !selected) {
-      return onChange([], actionMeta);
+      // @ts-expect-error I'm sorry, but trust me I made this component much better
+      onChange([], actionMeta);
+    } else {
+      // @ts-expect-error I'm sorry, but trust me I made this component much better
+      onChange(selected, actionMeta);
     }
-
-    onChange(selected, actionMeta);
   };
 
-  render() {
-    const {
-      classes,
-      className,
-      components,
-      createNew,
-      disabled,
-      errorText,
-      filterOption,
-      label,
-      loadOptions,
-      isClearable,
-      isMulti,
-      isLoading,
-      placeholder,
-      onChange,
-      onInputChange,
-      options,
-      value,
-      noOptionsMessage,
-      onMenuClose,
-      onBlur,
-      blurInputOnSelect,
-      medium,
-      small,
-      noMarginTop,
-      textFieldProps,
-      inline,
-      hideLabel,
-      errorGroup,
-      onFocus,
-      inputId,
-      overflowPortal,
-      theme,
-      required,
-      creatable,
-      ...restOfProps
-    } = this.props;
-
-    /*
-     * By default, we use the built-in Option component from React-Select, along with several Material-UI based
-     * components (listed in the _components variable above). To customize the select in a particular instance
-     * (for example, to render more complicated options for search bars), provide the component to use in a prop
-     * Object. Specify the name of the component to override as the object key, with the component to use in its
-     * place as the value. Full list of available components to override is available at
-     * http://react-select.com/components#replaceable-components. As an example, to provide a custom option component, use:
-     * <Select components={{ Option: MyCustomOptionComponent }}.
-     *
-     * The components passed in as props will be merged with the overrides we are already using, with the passed components
-     * taking precedence.
-     */
-    const combinedComponents: any = { ..._components, ...components };
+  /*
+   * By default, we use the built-in Option component from React-Select, along with several Material-UI based
+   * components (listed in the _components variable above). To customize the select in a particular instance
+   * (for example, to render more complicated options for search bars), provide the component to use in a prop
+   * Object. Specify the name of the component to override as the object key, with the component to use in its
+   * place as the value. Full list of available components to override is available at
+   * http://react-select.com/components#replaceable-components. As an example, to provide a custom option component, use:
+   * <Select components={{ Option: MyCustomOptionComponent }}.
+   *
+   * The components passed in as props will be merged with the overrides we are already using, with the passed components
+   * taking precedence.
+   */
+  const combinedComponents: any = { ..._components, ...components };
 
-    // If async, pass loadOptions instead of options. A Select can't be both Creatable and Async.
-    // (AsyncCreatable exists, but we have not adapted it.)
-    type PossibleProps = BaseSelectProps | CreatableProps;
-    const BaseSelect: React.ComponentClass<PossibleProps> = creatable
-      ? CreatableSelect
-      : ReactSelect;
+  // If async, pass loadOptions instead of options. A Select can't be both Creatable and Async.
+  // (AsyncCreatable exists, but we have not adapted it.)
 
-    if (creatable) {
-      restOfProps.variant = 'creatable';
-    }
+  const BaseSelect = creatable
+    ? (CreatableSelect as React.ComponentClass<BaseSelectProps<I, any, any>>)
+    : (ReactSelect as React.ComponentClass<BaseSelectProps<I, any, any>>);
 
-    if (overflowPortal) {
-      restOfProps.menuPortalTarget = document.body;
-      // Since we're attaching the <Select /> to the document body directly, none of our CSS
-      // targeting will work, so we have to supply the styles as a prop.
-      restOfProps.styles = reactSelectStyles(theme);
-    }
+  if (creatable) {
+    restOfProps.variant = 'creatable';
+  }
 
-    return (
-      <BaseSelect
-        {...restOfProps}
-        // If isClearable hasn't been supplied, default to true
-        isClearable={isClearable ?? true}
-        isSearchable
-        blurInputOnSelect={blurInputOnSelect}
-        isLoading={isLoading}
-        filterOption={filterOption}
-        isMulti={isMulti}
-        isDisabled={disabled}
-        classes={classes}
-        className={classNames(className, {
-          [classes.root]: true,
-        })}
-        classNamePrefix="react-select"
-        /*
-          textFieldProps isn't native to react-select
-          but we're using the MUI select element so any props that
-          can be passed to the MUI TextField element can be passed here
-         */
-        inputId={
-          inputId
-            ? inputId
-            : typeof label === 'string'
-            ? convertToKebabCase(label)
-            : null
-        }
-        textFieldProps={{
-          ...textFieldProps,
-          label,
-          hideLabel,
-          errorText,
-          errorGroup,
-          disabled,
-          noMarginTop,
-          InputLabelProps: {
-            shrink: true,
-          },
-          className: classNames(
-            {
-              [classes.medium]: medium,
-              [classes.small]: small,
-              [classes.inline]: inline,
-            },
-            className
-          ),
-          required,
-        }}
-        /**
-         * react-select wants you to pass "null" to clear out the value
-         * so we need to allow the parent to pass that if it wants
-         */
-        value={typeof value === 'undefined' ? undefined : value}
-        onBlur={onBlur}
-        options={options}
-        components={combinedComponents}
-        onChange={this._onChange}
-        onInputChange={onInputChange}
-        onCreateOption={createNew}
-        placeholder={placeholder || 'Select a value...'}
-        noOptionsMessage={this.props.noOptionsMessage || (() => 'No results')}
-        menuPlacement={this.props.menuPlacement || 'auto'}
-        onMenuClose={onMenuClose}
-        onFocus={onFocus}
-      />
-    );
+  if (overflowPortal) {
+    restOfProps.menuPortalTarget = document.body;
+    // Since we're attaching the <Select /> to the document body directly, none of our CSS
+    // targeting will work, so we have to supply the styles as a prop.
+    restOfProps.styles = reactSelectStyles(theme);
   }
-}
 
-const styled = withStyles(styles);
+  return (
+    <BaseSelect
+      {...restOfProps}
+      label={props.label}
+      // If isClearable hasn't been supplied, default to true
+      isClearable={isClearable ?? true}
+      isSearchable
+      blurInputOnSelect={blurInputOnSelect}
+      isLoading={isLoading}
+      isDisabled={props.disabled || props.isDisabled}
+      filterOption={filterOption}
+      isMulti={isMulti}
+      classes={classes}
+      className={classNames(className, classes.root)}
+      classNamePrefix="react-select"
+      inputId={
+        inputId
+          ? inputId
+          : typeof label === 'string'
+          ? convertToKebabCase(label)
+          : null
+      }
+      /*
+        textFieldProps isn't native to react-select
+        but we're using the MUI select element so any props that
+        can be passed to the MUI TextField element can be passed here
+      */
+      textFieldProps={{
+        ...textFieldProps,
+        label,
+        hideLabel,
+        errorText,
+        errorGroup,
+        disabled: props.isDisabled || props.disabled,
+        noMarginTop,
+        InputLabelProps: {
+          shrink: true,
+        },
+        className: classNames(
+          {
+            [classes.medium]: medium,
+            [classes.small]: small,
+            [classes.inline]: inline,
+          },
+          className
+        ),
+        required,
+      }}
+      value={value}
+      onBlur={onBlur}
+      options={options}
+      components={combinedComponents}
+      onChange={_onChange}
+      onInputChange={onInputChange}
+      placeholder={placeholder || 'Select a value...'}
+      noOptionsMessage={noOptionsMessage || (() => 'No results')}
+      menuPlacement={props.menuPlacement || 'auto'}
+      onMenuClose={onMenuClose}
+      onFocus={onFocus}
+    />
+  );
+};
 
-export default styled(withTheme(Select));
+export default Select;
diff --git a/packages/manager/src/components/EnhancedSelect/index.tsx b/packages/manager/src/components/EnhancedSelect/index.tsx
index 624c7fc1c59..628ac2e6c2d 100644
--- a/packages/manager/src/components/EnhancedSelect/index.tsx
+++ b/packages/manager/src/components/EnhancedSelect/index.tsx
@@ -1,10 +1,3 @@
-import EnhancedSelect, {
-  BaseSelectProps as _BaseSelectProps,
-  GroupType as _GroupType,
-  Item as _Item,
-} from './Select';
-/* tslint:disable */
-export interface Item<T> extends _Item<T> {}
-export interface GroupType<T> extends _GroupType<T> {}
-export interface BaseSelectProps extends _BaseSelectProps {}
+import EnhancedSelect from './Select';
+export type { BaseSelectProps, GroupType, Item } from './Select';
 export default EnhancedSelect;
diff --git a/packages/manager/src/components/EnhancedSelect/variants/RegionSelect/RegionSelect.tsx b/packages/manager/src/components/EnhancedSelect/variants/RegionSelect/RegionSelect.tsx
index 3098c99c37b..d2cdca1114d 100644
--- a/packages/manager/src/components/EnhancedSelect/variants/RegionSelect/RegionSelect.tsx
+++ b/packages/manager/src/components/EnhancedSelect/variants/RegionSelect/RegionSelect.tsx
@@ -1,6 +1,7 @@
 import Select, {
   BaseSelectProps,
   GroupType,
+  Item,
 } from 'src/components/EnhancedSelect/Select';
 import * as React from 'react';
 import SingleValue from 'src/components/EnhancedSelect/components/SingleValue';
@@ -13,13 +14,16 @@ import {
   ContinentNames,
 } from './utils';
 
-interface Props extends Omit<BaseSelectProps, 'onChange'> {
+interface Props<IsClearable extends boolean>
+  extends Omit<
+    BaseSelectProps<Item<string>, false, IsClearable>,
+    'onChange' | 'label'
+  > {
+  label?: string;
   regions: Region[];
   handleSelection: (id: string) => void;
   selectedID: string | null;
-  label?: string;
   helperText?: string;
-  isClearable?: boolean;
   required?: boolean;
   width?: number;
 }
@@ -70,7 +74,7 @@ export const getRegionOptions = (regions: Region[]) => {
 
 export const getSelectedRegionById = (
   regionID: string,
-  options: GroupType[]
+  options: GroupType<string>[]
 ) => {
   const regions = options.reduce(
     (accum, thisGroup) => [...accum, ...thisGroup.options],
@@ -97,60 +101,62 @@ const sortRegions = (region1: RegionItem, region2: RegionItem) => {
   return 0;
 };
 
-export const RegionSelect = React.memo((props: Props) => {
-  const {
-    label,
-    disabled,
-    handleSelection,
-    isClearable,
-    helperText,
-    regions,
-    selectedID,
-    styles,
-    required,
-    width,
-    ...restOfReactSelectProps
-  } = props;
+export const RegionSelect = React.memo(
+  <IsClearable extends boolean>(props: Props<IsClearable>) => {
+    const {
+      label,
+      disabled,
+      handleSelection,
+      isClearable,
+      helperText,
+      regions,
+      selectedID,
+      styles,
+      required,
+      width,
+      ...restOfReactSelectProps
+    } = props;
 
-  const onChange = React.useCallback(
-    (selection: RegionItem | null) => {
-      if (selection === null) {
-        handleSelection('');
-        return;
-      }
-      if (selection.disabledMessage) {
-        // React Select's disabled state should prevent anything
-        // from firing, this is basic paranoia.
-        return;
-      }
-      handleSelection(selection?.value);
-    },
-    [handleSelection]
-  );
+    const onChange = React.useCallback(
+      (selection: RegionItem | null) => {
+        if (selection === null) {
+          handleSelection('');
+          return;
+        }
+        if (selection.disabledMessage) {
+          // React Select's disabled state should prevent anything
+          // from firing, this is basic paranoia.
+          return;
+        }
+        handleSelection(selection?.value);
+      },
+      [handleSelection]
+    );
 
-  const options = React.useMemo(() => getRegionOptions(regions), [regions]);
+    const options = React.useMemo(() => getRegionOptions(regions), [regions]);
 
-  return (
-    <div style={{ width }}>
-      <Select
-        isClearable={Boolean(isClearable)} // Defaults to false if the prop isn't provided
-        value={getSelectedRegionById(selectedID || '', options) ?? ''}
-        label={label ?? 'Region'}
-        disabled={disabled}
-        placeholder="Select a Region"
-        options={options}
-        onChange={onChange}
-        components={{ Option: RegionOption, SingleValue }}
-        isOptionDisabled={(option: RegionItem) =>
-          Boolean(option.disabledMessage)
-        }
-        styles={styles || selectStyles}
-        textFieldProps={{
-          tooltipText: helperText,
-        }}
-        required={required}
-        {...restOfReactSelectProps}
-      />
-    </div>
-  );
-});
+    return (
+      <div style={{ width }}>
+        <Select
+          isClearable={Boolean(isClearable)} // Defaults to false if the prop isn't provided
+          value={getSelectedRegionById(selectedID || '', options) ?? null}
+          label={label ?? 'Region'}
+          disabled={disabled}
+          placeholder="Select a Region"
+          options={options}
+          onChange={onChange}
+          components={{ Option: RegionOption, SingleValue }}
+          isOptionDisabled={(option: RegionItem) =>
+            Boolean(option.disabledMessage)
+          }
+          styles={styles || selectStyles}
+          textFieldProps={{
+            tooltipText: helperText,
+          }}
+          required={required}
+          {...restOfReactSelectProps}
+        />
+      </div>
+    );
+  }
+);
diff --git a/packages/manager/src/components/ImageSelect/ImageSelect.tsx b/packages/manager/src/components/ImageSelect/ImageSelect.tsx
index 87e0116eeb4..967d2a62a1a 100644
--- a/packages/manager/src/components/ImageSelect/ImageSelect.tsx
+++ b/packages/manager/src/components/ImageSelect/ImageSelect.tsx
@@ -37,7 +37,7 @@ interface Props {
 }
 
 export interface ImageProps
-  extends Omit<BaseSelectProps, 'onChange' | 'variant'> {
+  extends Omit<BaseSelectProps<ImageItem>, 'onChange' | 'variant'> {
   selectedImageID?: string;
   disabled: boolean;
   handleSelectImage: (selection?: string) => void;
@@ -196,7 +196,7 @@ export const ImageSelect: React.FC<Props> = (props) => {
               selectedImageID || '',
               options
             )}
-            errorText={error || imageError}
+            errorText={imageError}
             components={{ Option: ImageOption, SingleValue }}
             {...reactSelectProps}
             className={classNames}
diff --git a/packages/manager/src/components/PaginationFooter/PaginationFooter.tsx b/packages/manager/src/components/PaginationFooter/PaginationFooter.tsx
index cbf97b37e7c..6b71b95b986 100644
--- a/packages/manager/src/components/PaginationFooter/PaginationFooter.tsx
+++ b/packages/manager/src/components/PaginationFooter/PaginationFooter.tsx
@@ -1,42 +1,39 @@
-import classNames from 'classnames';
 import * as React from 'react';
-import { createStyles, withStyles, WithStyles } from '@mui/styles';
-import { Theme } from '@mui/material/styles';
-import Select, { Item } from 'src/components/EnhancedSelect/Select';
+import classNames from 'classnames';
+import Select from 'src/components/EnhancedSelect/Select';
 import Grid from '@mui/material/Unstable_Grid2';
 import PaginationControls from '../PaginationControls';
+import { makeStyles } from '@mui/styles';
+import { Theme } from '@mui/material/styles';
 
 export const MIN_PAGE_SIZE = 25;
 
-type ClassNames = 'root' | 'padded' | 'select';
-
-const styles = (theme: Theme) =>
-  createStyles({
-    root: {
-      background: theme.bg.bgPaper,
-      margin: 0,
-      minHeight: theme.spacing(5),
-      width: '100%',
+const useStyles = makeStyles((theme: Theme) => ({
+  root: {
+    background: theme.bg.bgPaper,
+    margin: 0,
+    minHeight: theme.spacing(5),
+    width: '100%',
+  },
+  padded: {
+    padding: `0 ${theme.spacing(2)} ${theme.spacing(1)}`,
+  },
+  select: {
+    '& .MuiInput-root': {
+      backgroundColor: theme.bg.bgPaper,
+      border: 'none',
+      '&.Mui-focused': {
+        boxShadow: 'none',
+      },
     },
-    padded: {
-      padding: `0 ${theme.spacing(2)} ${theme.spacing(1)}`,
+    '& .MuiInput-input': {
+      paddingTop: 4,
     },
-    select: {
-      '& .MuiInput-root': {
-        backgroundColor: theme.bg.bgPaper,
-        border: 'none',
-        '&.Mui-focused': {
-          boxShadow: 'none',
-        },
-      },
-      '& .MuiInput-input': {
-        paddingTop: 4,
-      },
-      '& .react-select__value-container': {
-        paddingLeft: 12,
-      },
+    '& .react-select__value-container': {
+      paddingLeft: 12,
     },
-  });
+  },
+}));
 
 export interface PaginationProps {
   count: number;
@@ -53,8 +50,6 @@ interface Props extends PaginationProps {
   padded?: boolean;
 }
 
-type CombinedProps = Props & WithStyles<ClassNames>;
-
 export const PAGE_SIZES = [MIN_PAGE_SIZE, 50, 75, 100, Infinity];
 
 const baseOptions = [
@@ -64,86 +59,79 @@ const baseOptions = [
   { label: 'Show 100', value: PAGE_SIZES[3] },
 ];
 
-class PaginationFooter extends React.PureComponent<CombinedProps> {
-  handleSizeChange = (e: Item) => this.props.handleSizeChange(+e.value);
-
-  render() {
-    const {
-      classes,
-      count,
-      fixedSize,
-      page,
-      pageSize,
-      handlePageChange,
-      padded,
-      eventCategory,
-      showAll,
-    } = this.props;
-
-    if (count <= MIN_PAGE_SIZE && !fixedSize) {
-      return null;
-    }
-
-    const finalOptions = [...baseOptions];
+const PaginationFooter = (props: Props) => {
+  const classes = useStyles();
+  const {
+    count,
+    fixedSize,
+    page,
+    pageSize,
+    handlePageChange,
+    handleSizeChange,
+    padded,
+    eventCategory,
+    showAll,
+  } = props;
+
+  if (count <= MIN_PAGE_SIZE && !fixedSize) {
+    return null;
+  }
 
-    // Add "Show All" to the list of options if the consumer has so specified.
-    if (showAll) {
-      finalOptions.push({ label: 'Show All', value: Infinity });
-    }
+  const finalOptions = [...baseOptions];
 
-    const defaultPagination = finalOptions.find((eachOption) => {
-      return eachOption.value === pageSize;
-    });
-
-    // If "Show All" is currently selected, pageSize is `Infinity`.
-    const isShowingAll = pageSize === Infinity;
-
-    return (
-      <Grid
-        container
-        justifyContent="space-between"
-        alignItems="center"
-        className={classNames({
-          [classes.root]: true,
-          [classes.padded]: padded,
-        })}
-      >
-        <Grid>
-          {!isShowingAll && (
-            <PaginationControls
-              onClickHandler={handlePageChange}
-              page={page}
-              count={count}
-              pageSize={pageSize}
-              eventCategory={eventCategory}
-            />
-          )}
-        </Grid>
-        {!fixedSize ? (
-          <Grid className={classes.select}>
-            <Select
-              options={finalOptions}
-              defaultValue={defaultPagination}
-              onChange={this.handleSizeChange}
-              label="Number of items to show"
-              hideLabel
-              isClearable={false}
-              noMarginTop
-              menuPlacement="top"
-              medium
-            />
-          </Grid>
-        ) : null}
-      </Grid>
-    );
+  // Add "Show All" to the list of options if the consumer has so specified.
+  if (showAll) {
+    finalOptions.push({ label: 'Show All', value: Infinity });
   }
-}
 
-export default withStyles(styles)(PaginationFooter);
+  const defaultPagination = finalOptions.find((eachOption) => {
+    return eachOption.value === pageSize;
+  });
+
+  // If "Show All" is currently selected, pageSize is `Infinity`.
+  const isShowingAll = pageSize === Infinity;
+
+  return (
+    <Grid
+      container
+      justifyContent="space-between"
+      alignItems="center"
+      className={classNames({
+        [classes.root]: true,
+        [classes.padded]: padded,
+      })}
+    >
+      <Grid>
+        {!isShowingAll && (
+          <PaginationControls
+            onClickHandler={handlePageChange}
+            page={page}
+            count={count}
+            pageSize={pageSize}
+            eventCategory={eventCategory}
+          />
+        )}
+      </Grid>
+      {!fixedSize ? (
+        <Grid className={classes.select}>
+          <Select
+            options={finalOptions}
+            defaultValue={defaultPagination}
+            onChange={({ value }) => handleSizeChange(value)}
+            label="Number of items to show"
+            hideLabel
+            isClearable={false}
+            noMarginTop
+            menuPlacement="top"
+            medium
+          />
+        </Grid>
+      ) : null}
+    </Grid>
+  );
+};
 
-// =============================================================================
-// Utilities
-// =============================================================================
+export default PaginationFooter;
 
 /**
  * Return the minimum page size needed to display a given number of items (`value`).
diff --git a/packages/manager/src/components/TagsInput/TagsInput.tsx b/packages/manager/src/components/TagsInput/TagsInput.tsx
index 522abfef650..96e163a1be2 100644
--- a/packages/manager/src/components/TagsInput/TagsInput.tsx
+++ b/packages/manager/src/components/TagsInput/TagsInput.tsx
@@ -91,7 +91,9 @@ const TagsInput = (props: TagsInputProps) => {
     : labelError ||
       tagError ||
       generalError ||
-      (accountTagsError !== null && 'There was an error retrieving your tags.');
+      (accountTagsError !== null
+        ? 'There was an error retrieving your tags.'
+        : undefined);
 
   return (
     <Select
@@ -105,9 +107,9 @@ const TagsInput = (props: TagsInputProps) => {
       errorText={error}
       value={value}
       onChange={onChange}
-      createNew={createTag}
+      onCreateOption={createTag}
       noOptionsMessage={getEmptyMessage}
-      disabled={disabled}
+      isDisabled={disabled}
       menuPlacement={menuPlacement}
     />
   );
diff --git a/packages/manager/src/components/TagsPanel/TagsPanel.tsx b/packages/manager/src/components/TagsPanel/TagsPanel.tsx
index d521b74be59..12a3452d12c 100644
--- a/packages/manager/src/components/TagsPanel/TagsPanel.tsx
+++ b/packages/manager/src/components/TagsPanel/TagsPanel.tsx
@@ -137,7 +137,6 @@ const TagsPanel = (props: TagsPanelProps) => {
 
   const [tagError, setTagError] = React.useState<string>('');
   const [isCreatingTag, setIsCreatingTag] = React.useState(false);
-  const [tagInputValue, setTagInputValue] = React.useState('');
   const [tagsLoading, setTagsLoading] = React.useState(false);
 
   const { data: profile } = useProfile();
@@ -225,8 +224,6 @@ const TagsPanel = (props: TagsPanelProps) => {
       setTagsLoading(true);
       updateTags([...tags, value.label].sort())
         .then(() => {
-          // set the input value to blank on submit
-          setTagInputValue('');
           if (userTags) {
             updateTagsSuggestionsData([...userTags, value], queryClient);
           }
@@ -255,7 +252,6 @@ const TagsPanel = (props: TagsPanelProps) => {
           placeholder="Create or Select a Tag"
           label="Create or Select a Tag"
           hideLabel
-          value={tagInputValue}
           createOptionPosition="first"
           className={classes.selectTag}
           escapeClearsValue
diff --git a/packages/manager/src/features/Billing/BillingPanels/ContactInfoPanel/UpdateContactInformationForm/UpdateContactInformationForm.tsx b/packages/manager/src/features/Billing/BillingPanels/ContactInfoPanel/UpdateContactInformationForm/UpdateContactInformationForm.tsx
index d880c94c060..b73552bb0fa 100644
--- a/packages/manager/src/features/Billing/BillingPanels/ContactInfoPanel/UpdateContactInformationForm/UpdateContactInformationForm.tsx
+++ b/packages/manager/src/features/Billing/BillingPanels/ContactInfoPanel/UpdateContactInformationForm/UpdateContactInformationForm.tsx
@@ -228,9 +228,7 @@ const UpdateContactInformationForm = ({ onClose, focusEmail }: Props) => {
             label="Country"
             errorText={errorMap.country}
             isClearable={false}
-            onChange={(item: Item) =>
-              formik.setFieldValue('country', item.value)
-            }
+            onChange={(item) => formik.setFieldValue('country', item.value)}
             options={countryResults}
             placeholder="Select a Country"
             required={flags.regionDropdown}
@@ -251,9 +249,7 @@ const UpdateContactInformationForm = ({ onClose, focusEmail }: Props) => {
               label={`${formik.values.country === 'US' ? 'State' : 'Province'}`}
               errorText={errorMap.state}
               isClearable={false}
-              onChange={(item: Item) =>
-                formik.setFieldValue('state', item.value)
-              }
+              onChange={(item) => formik.setFieldValue('state', item.value)}
               options={filteredRegionResults}
               placeholder={
                 formik.values.country === 'US' ? 'state' : 'province'
@@ -262,10 +258,12 @@ const UpdateContactInformationForm = ({ onClose, focusEmail }: Props) => {
               value={
                 filteredRegionResults.find(
                   ({ value }) => value === formik.values.state
-                ) ?? ''
+                ) ?? null
               }
               textFieldProps={{
-                'data-qa-contact-state-province': true,
+                dataAttrs: {
+                  'data-qa-contact-state-province': true,
+                },
               }}
             />
           ) : (
diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/MaintenanceWindow.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/MaintenanceWindow.tsx
index 368a5b768bb..fc1a171962f 100644
--- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/MaintenanceWindow.tsx
+++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/MaintenanceWindow.tsx
@@ -80,7 +80,7 @@ export const MaintenanceWindow = (props: Props) => {
   const [
     modifiedWeekSelectionMap,
     setModifiedWeekSelectionMap,
-  ] = React.useState<Item[]>([]);
+  ] = React.useState<Item<number>[]>([]);
 
   const { classes } = useStyles();
   const { enqueueSnackbar } = useSnackbar();
@@ -90,7 +90,10 @@ export const MaintenanceWindow = (props: Props) => {
     database.id
   );
 
-  const weekSelectionModifier = (day: string, weekSelectionMap: Item[]) => {
+  const weekSelectionModifier = (
+    day: string,
+    weekSelectionMap: Item<number>[]
+  ) => {
     const modifiedMap = weekSelectionMap.map((weekSelectionElement) => {
       return {
         label: `${weekSelectionElement.label} ${day} of each month`,
@@ -139,14 +142,6 @@ export const MaintenanceWindow = (props: Props) => {
       });
   };
 
-  const scheduledUpdateDay = daySelectionMap.find(
-    (thisOption) => thisOption.value === database.updates?.day_of_week
-  );
-
-  const scheduledUpdateHour = hourSelectionMap.find(
-    (thisOption) => thisOption.value === database.updates?.hour_of_day
-  );
-
   const utcOffsetInHours = timezone
     ? DateTime.fromISO(new Date().toISOString(), { zone: timezone }).offset / 60
     : DateTime.now().offset / 60;
@@ -205,11 +200,13 @@ export const MaintenanceWindow = (props: Props) => {
                   },
                 }}
                 options={daySelectionMap}
-                defaultValue={scheduledUpdateDay?.value ?? 1}
+                defaultValue={daySelectionMap.find(
+                  (option) => option.value === 1
+                )}
                 value={daySelectionMap.find(
                   (thisOption) => thisOption.value === values.day_of_week
                 )}
-                onChange={(e: Item) => {
+                onChange={(e) => {
                   setFormTouched(true);
                   setFieldValue('day_of_week', e.value);
                   weekSelectionModifier(e.label, weekSelectionMap);
@@ -225,7 +222,6 @@ export const MaintenanceWindow = (props: Props) => {
                 isClearable={false}
                 menuPlacement="top"
                 name="Day of Week"
-                error={touched.day_of_week && Boolean(errors.day_of_week)}
                 errorText={touched.day_of_week ? errors.day_of_week : undefined}
                 noMarginTop
               />
@@ -239,20 +235,21 @@ export const MaintenanceWindow = (props: Props) => {
                     },
                   }}
                   options={hourSelectionMap}
-                  defaultValue={scheduledUpdateHour?.value ?? 20}
+                  defaultValue={hourSelectionMap.find(
+                    (option) => option.value === 20
+                  )}
                   value={hourSelectionMap.find(
                     (thisOption) => thisOption.value === values.hour_of_day
                   )}
-                  onChange={(e: Item) => {
+                  onChange={(e) => {
                     setFormTouched(true);
-                    setFieldValue('hour_of_day', +e.value);
+                    setFieldValue('hour_of_day', e.value);
                   }}
                   label="Time of Day (UTC)"
                   placeholder="Choose a time"
                   isClearable={false}
                   menuPlacement="top"
                   name="Time of Day"
-                  error={touched.hour_of_day && Boolean(errors.hour_of_day)}
                   errorText={
                     touched.hour_of_day ? errors.hour_of_day : undefined
                   }
@@ -331,16 +328,15 @@ export const MaintenanceWindow = (props: Props) => {
                   value={modifiedWeekSelectionMap.find(
                     (thisOption) => thisOption.value === values.week_of_month
                   )}
-                  onChange={(e: Item) => {
+                  onChange={(e) => {
                     setFormTouched(true);
-                    setFieldValue('week_of_month', +e.value);
+                    setFieldValue('week_of_month', e.value);
                   }}
                   label="Repeats on"
                   placeholder="Repeats on"
                   isClearable={false}
                   menuPlacement="top"
                   name="Repeats on"
-                  error={touched.week_of_month && Boolean(errors.week_of_month)}
                   errorText={
                     touched.week_of_month ? errors.week_of_month : undefined
                   }
diff --git a/packages/manager/src/features/Domains/DomainRecordDrawer.tsx b/packages/manager/src/features/Domains/DomainRecordDrawer.tsx
index f2207c4d3d7..5b8b0dbf865 100644
--- a/packages/manager/src/features/Domains/DomainRecordDrawer.tsx
+++ b/packages/manager/src/features/Domains/DomainRecordDrawer.tsx
@@ -297,7 +297,7 @@ class DomainRecordDrawer extends React.Component<Props, State> {
         options={rateOptions}
         label="Expire Rate"
         defaultValue={defaultRate}
-        onChange={(e: Item) => this.setExpireSec(+e.value)}
+        onChange={(e) => this.setExpireSec(e.value)}
         isClearable={false}
         textFieldProps={{
           dataAttrs: {
@@ -350,7 +350,7 @@ class DomainRecordDrawer extends React.Component<Props, State> {
         options={MSSelectOptions}
         label={label}
         defaultValue={defaultOption}
-        onChange={(e: Item) => fn(+e.value)}
+        onChange={(e) => fn(e.value)}
         isClearable={false}
         textFieldProps={{
           dataAttrs: {
@@ -385,7 +385,7 @@ class DomainRecordDrawer extends React.Component<Props, State> {
         options={protocolOptions}
         label="Protocol"
         defaultValue={defaultProtocol}
-        onChange={(e: Item) => this.setProtocol(e.value)}
+        onChange={(e) => this.setProtocol(e.value)}
         isClearable={false}
         textFieldProps={{
           dataAttrs: {
diff --git a/packages/manager/src/features/Firewalls/FirewallDetail/Rules/FirewallRuleDrawer.tsx b/packages/manager/src/features/Firewalls/FirewallDetail/Rules/FirewallRuleDrawer.tsx
index c290899b5e2..a37e9d7ce24 100644
--- a/packages/manager/src/features/Firewalls/FirewallDetail/Rules/FirewallRuleDrawer.tsx
+++ b/packages/manager/src/features/Firewalls/FirewallDetail/Rules/FirewallRuleDrawer.tsx
@@ -262,7 +262,7 @@ const FirewallRuleForm: React.FC<FirewallRuleFormProps> = React.memo(
 
     // This is an edge case; if there's an error for the Ports field
     // but CUSTOM isn't selected, the error won't be visible to the user.
-    const generalPortError = !hasCustomInput && errors.ports;
+    const generalPortError = !hasCustomInput ? errors.ports : undefined;
 
     // Set form field errors for each error we have (except "addresses" errors, which are handled
     // by IP Error state).
@@ -459,11 +459,7 @@ const FirewallRuleForm: React.FC<FirewallRuleFormProps> = React.memo(
           name="protocol"
           placeholder="Select a protocol..."
           aria-label="Select rule protocol."
-          value={
-            values.protocol
-              ? { label: values.protocol, value: values.protocol }
-              : undefined
-          }
+          value={protocolOptions.find((p) => p.value === values.protocol)}
           errorText={errors.protocol}
           options={protocolOptions}
           onChange={handleProtocolChange}
diff --git a/packages/manager/src/features/Help/Panels/AlgoliaSearchBar.tsx b/packages/manager/src/features/Help/Panels/AlgoliaSearchBar.tsx
index 1b0c2c9ef9a..3c2132e8dc6 100644
--- a/packages/manager/src/features/Help/Panels/AlgoliaSearchBar.tsx
+++ b/packages/manager/src/features/Help/Panels/AlgoliaSearchBar.tsx
@@ -169,7 +169,6 @@ class AlgoliaSearchBar extends React.Component<CombinedProps, State> {
             hideLabel
             className={classes.enhancedSelectWrapper}
             styles={selectStyles}
-            value={false}
           />
         </div>
       </React.Fragment>
diff --git a/packages/manager/src/features/Images/ImageSelect.tsx b/packages/manager/src/features/Images/ImageSelect.tsx
index c7db72e7c93..64eb19adc6a 100644
--- a/packages/manager/src/features/Images/ImageSelect.tsx
+++ b/packages/manager/src/features/Images/ImageSelect.tsx
@@ -22,23 +22,30 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
 }));
 
-interface Props {
+interface BaseProps {
   images: Image[];
   imageError?: string;
   imageFieldError?: string;
-  isMulti?: boolean;
-  helperText?: string;
-  value?: Item | Item[];
   disabled?: boolean;
-  onSelect: (selected: Item<any> | Item<any>[]) => void;
   label?: string;
   required?: boolean;
   anyAllOption?: boolean;
+  helperText?: string;
 }
 
-type CombinedProps = Props;
+interface Props extends BaseProps {
+  isMulti?: false;
+  value?: Item;
+  onSelect: (selected: Item) => void;
+}
+
+interface MultiProps extends BaseProps {
+  isMulti: true;
+  value?: Item[];
+  onSelect: (selected: Item[]) => void;
+}
 
-export const ImageSelect: React.FC<CombinedProps> = (props) => {
+export const ImageSelect = (props: Props | MultiProps) => {
   const {
     helperText,
     images,
diff --git a/packages/manager/src/features/Longview/shared/TimeRangeSelect.tsx b/packages/manager/src/features/Longview/shared/TimeRangeSelect.tsx
index a506d3c6a4f..703b2d78763 100644
--- a/packages/manager/src/features/Longview/shared/TimeRangeSelect.tsx
+++ b/packages/manager/src/features/Longview/shared/TimeRangeSelect.tsx
@@ -8,7 +8,11 @@ import Select, {
 } from 'src/components/EnhancedSelect/Select';
 import { useMutatePreferences, usePreferences } from 'src/queries/preferences';
 
-interface Props extends Omit<BaseSelectProps, 'onChange' | 'defaultValue'> {
+interface Props
+  extends Omit<
+    BaseSelectProps<Item<Labels, Labels>, false>,
+    'onChange' | 'defaultValue'
+  > {
   handleStatsChange?: (start: number, end: number) => void;
   defaultValue?: Labels;
 }
diff --git a/packages/manager/src/features/Managed/Contacts/ContactsDrawer.tsx b/packages/manager/src/features/Managed/Contacts/ContactsDrawer.tsx
index 7c789becb78..ea340e5ed09 100644
--- a/packages/manager/src/features/Managed/Contacts/ContactsDrawer.tsx
+++ b/packages/manager/src/features/Managed/Contacts/ContactsDrawer.tsx
@@ -6,7 +6,7 @@ import * as React from 'react';
 import ActionsPanel from 'src/components/ActionsPanel';
 import Button from 'src/components/Button';
 import Drawer from 'src/components/Drawer';
-import Select, { Item } from 'src/components/EnhancedSelect/Select';
+import Select from 'src/components/EnhancedSelect/Select';
 import Grid from 'src/components/Grid';
 import Notice from 'src/components/Notice';
 import TextField from 'src/components/TextField';
@@ -191,14 +191,14 @@ const ContactsDrawer: React.FC<CombinedProps> = (props) => {
                           value: values.group,
                           label: values.group,
                         }
-                      : ''
+                      : null
                   }
                   options={groups.map((group) => ({
                     label: group.groupName,
                     value: group.groupName,
                   }))}
-                  onChange={(selectedGroup: Item) =>
-                    setFieldValue('group', selectedGroup.value)
+                  onChange={(selectedGroup) =>
+                    setFieldValue('group', selectedGroup?.value)
                   }
                   errorText={errors.group}
                 />
diff --git a/packages/manager/src/features/ObjectStorage/BucketDetail/AccessSelect.tsx b/packages/manager/src/features/ObjectStorage/BucketDetail/AccessSelect.tsx
index 78956a88a55..a87f26c7c24 100644
--- a/packages/manager/src/features/ObjectStorage/BucketDetail/AccessSelect.tsx
+++ b/packages/manager/src/features/ObjectStorage/BucketDetail/AccessSelect.tsx
@@ -8,7 +8,6 @@ import { makeStyles } from '@mui/styles';
 import { Theme } from '@mui/material/styles';
 import Typography from 'src/components/core/Typography';
 import EnhancedSelect from 'src/components/EnhancedSelect';
-import { Item } from 'src/components/EnhancedSelect/Select';
 import ExternalLink from 'src/components/ExternalLink';
 import Notice from 'src/components/Notice';
 import { Toggle } from 'src/components/Toggle';
@@ -156,11 +155,11 @@ const AccessSelect: React.FC<CombinedProps> = (props) => {
         options={_options}
         isLoading={accessLoading}
         disabled={accessLoading}
-        onChange={(selected: Item<ACLType> | null) => {
+        onChange={(selected) => {
           if (selected) {
             setUpdateAccessSuccess(false);
             setUpdateAccessError('');
-            setSelectedACL(selected.value);
+            setSelectedACL(selected.value as ACLType);
           }
         }}
         value={_options.find(
diff --git a/packages/manager/src/features/Profile/APITokens/CreateAPITokenDrawer.tsx b/packages/manager/src/features/Profile/APITokens/CreateAPITokenDrawer.tsx
index f48a3fe867f..a7474cdd5cd 100644
--- a/packages/manager/src/features/Profile/APITokens/CreateAPITokenDrawer.tsx
+++ b/packages/manager/src/features/Profile/APITokens/CreateAPITokenDrawer.tsx
@@ -203,7 +203,6 @@ export const CreateAPITokenDrawer = (props: Props) => {
           onChange={handleExpiryChange}
           value={expiryList.find((item) => item.value === form.values.expiry)}
           name="expiry"
-          labelId="expiry"
           label="Expiry"
           isClearable={false}
         />
diff --git a/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.tsx b/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.tsx
index 3e572cc1c76..5532b4af34a 100644
--- a/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.tsx
+++ b/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.tsx
@@ -14,7 +14,7 @@ import Box from 'src/components/core/Box';
 import FormHelperText from 'src/components/core/FormHelperText';
 import InputAdornment from 'src/components/core/InputAdornment';
 import Typography from 'src/components/core/Typography';
-import Select, { Item } from 'src/components/EnhancedSelect/Select';
+import Select from 'src/components/EnhancedSelect/Select';
 import { LinkButton } from 'src/components/LinkButton';
 import TextField from 'src/components/TextField';
 import {
@@ -167,11 +167,12 @@ export const PhoneVerification = () => {
       marginLeft: '-1px !important',
       marginTop: '0px !important',
     }),
-    singleValue: (provided: React.CSSProperties) => ({
-      ...provided,
-      textAlign: 'center',
-      fontSize: '20px',
-    }),
+    singleValue: (provided: React.CSSProperties) =>
+      ({
+        ...provided,
+        textAlign: 'center',
+        fontSize: '20px',
+      } as const),
   };
 
   const selectedCountry = countries.find(
@@ -249,6 +250,7 @@ export const PhoneVerification = () => {
                 })}
               >
                 <Select
+                  label="ISO Code"
                   onFocus={() => setIsPhoneInputFocused(true)}
                   onBlur={() => setIsPhoneInputFocused(false)}
                   styles={customStyles}
@@ -256,16 +258,15 @@ export const PhoneVerification = () => {
                   className={classes.select}
                   id="iso_code"
                   name="iso_code"
-                  type="text"
                   isClearable={false}
                   value={{
                     value: sendCodeForm.values.iso_code,
                     label: getCountryFlag(sendCodeForm.values.iso_code),
                   }}
-                  isOptionSelected={(option: Item) =>
+                  isOptionSelected={(option) =>
                     sendCodeForm.values.iso_code === option.value
                   }
-                  onChange={(item: Item) =>
+                  onChange={(item) =>
                     sendCodeForm.setFieldValue('iso_code', item.value)
                   }
                   options={countries.map((counrty) => ({
diff --git a/packages/manager/src/features/Profile/AuthenticationSettings/SecurityQuestions/Question.tsx b/packages/manager/src/features/Profile/AuthenticationSettings/SecurityQuestions/Question.tsx
index 5f92013ca1f..f5c04712e39 100644
--- a/packages/manager/src/features/Profile/AuthenticationSettings/SecurityQuestions/Question.tsx
+++ b/packages/manager/src/features/Profile/AuthenticationSettings/SecurityQuestions/Question.tsx
@@ -33,9 +33,9 @@ export const Question = (props: Props) => {
 
   const name = `security_questions[${index}].id`;
   const label = `Question ${index + 1}`;
-  const onChange = (item: Item<string>) => {
+  const onChange = (item: Item<number>) => {
     setFieldValue(`security_questions[${index}]`, {
-      id: Number.parseInt(item.value, 10),
+      id: item.value,
       question: item.label,
       response: '',
     });
@@ -61,7 +61,6 @@ export const Question = (props: Props) => {
       placeholder="Select a question"
       defaultValue={currentOption}
       isClearable={false}
-      height="36px"
       onChange={onChange}
     />
   );
diff --git a/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx b/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx
index 5b185bba6f6..f36d076d34f 100644
--- a/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx
+++ b/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx
@@ -16,7 +16,7 @@ import { SingleTextFieldForm } from 'src/components/SingleTextFieldForm/SingleTe
 import { useMutateProfile, useProfile } from 'src/queries/profile';
 import { ApplicationState } from 'src/store';
 import { v4 } from 'uuid';
-import TimezoneForm from './TimezoneForm';
+import { TimezoneForm } from './TimezoneForm';
 import { useNotificationsQuery } from 'src/queries/accountNotifications';
 
 const useStyles = makeStyles((theme: Theme) => ({
diff --git a/packages/manager/src/features/Profile/DisplaySettings/TimezoneForm.tsx b/packages/manager/src/features/Profile/DisplaySettings/TimezoneForm.tsx
index 60109b76ca0..be69d15761e 100644
--- a/packages/manager/src/features/Profile/DisplaySettings/TimezoneForm.tsx
+++ b/packages/manager/src/features/Profile/DisplaySettings/TimezoneForm.tsx
@@ -53,7 +53,7 @@ export const formatOffset = ({ label, offset }: Timezone) => {
   return `\(GMT ${isPositive}${hours}:${minutes}\) ${label}`;
 };
 
-const renderTimeZonesList = (): Item[] => {
+const renderTimeZonesList = (): Item<string>[] => {
   return timezones
     .map((tz) => ({ ...tz, offset: DateTime.now().setZone(tz.name).offset }))
     .sort((a, b) => a.offset - b.offset)
@@ -71,11 +71,11 @@ export const TimezoneForm = (props: Props) => {
   const { enqueueSnackbar } = useSnackbar();
   const { data: profile } = useProfile();
   const { mutateAsync: updateProfile, isLoading, error } = useMutateProfile();
-  const [value, setValue] = React.useState<Item | null>(null);
+  const [value, setValue] = React.useState<Item<string> | null>(null);
 
   const timezone = profile?.timezone ?? '';
 
-  const handleTimezoneChange = (timezone: Item) => {
+  const handleTimezoneChange = (timezone: Item<string>) => {
     setValue(timezone);
   };
 
@@ -85,7 +85,7 @@ export const TimezoneForm = (props: Props) => {
     }
 
     updateProfile({ timezone: String(value.value) }).then(() => {
-      enqueueSnackbar('Successfully update timezone', { variant: 'success' });
+      enqueueSnackbar('Successfully updated timezone', { variant: 'success' });
     });
   };
 
@@ -143,5 +143,3 @@ export const TimezoneForm = (props: Props) => {
     </>
   );
 };
-
-export default TimezoneForm;
diff --git a/packages/manager/src/features/StackScripts/UserDefinedFieldsPanel/FieldTypes/UserDefinedMultiSelect.tsx b/packages/manager/src/features/StackScripts/UserDefinedFieldsPanel/FieldTypes/UserDefinedMultiSelect.tsx
index f167f6f04b2..830b74815cb 100644
--- a/packages/manager/src/features/StackScripts/UserDefinedFieldsPanel/FieldTypes/UserDefinedMultiSelect.tsx
+++ b/packages/manager/src/features/StackScripts/UserDefinedFieldsPanel/FieldTypes/UserDefinedMultiSelect.tsx
@@ -30,7 +30,7 @@ class UserDefinedMultiSelect extends React.Component<CombinedProps, State> {
     manyof: this.props.field.manyof!.split(','),
   };
 
-  handleSelectManyOf = (selectedOptions: Item) => {
+  handleSelectManyOf = (selectedOptions: Item[]) => {
     const { updateFormState, field } = this.props;
 
     const arrayToString = Array.prototype.map
diff --git a/packages/manager/src/features/TopMenu/SearchBar/SearchBar.tsx b/packages/manager/src/features/TopMenu/SearchBar/SearchBar.tsx
index fe9f615bb8b..aaebfb098bb 100644
--- a/packages/manager/src/features/TopMenu/SearchBar/SearchBar.tsx
+++ b/packages/manager/src/features/TopMenu/SearchBar/SearchBar.tsx
@@ -331,7 +331,6 @@ export const SearchBar: React.FC<CombinedProps> = (props) => {
           isMulti={false}
           onMenuClose={onClose}
           onMenuOpen={onOpen}
-          value={false}
           menuIsOpen={menuOpen}
           guidance={guidanceText()}
         />
diff --git a/packages/manager/src/features/Users/UserPermissions.tsx b/packages/manager/src/features/Users/UserPermissions.tsx
index 2ab32e8e1db..b2a861c6dad 100644
--- a/packages/manager/src/features/Users/UserPermissions.tsx
+++ b/packages/manager/src/features/Users/UserPermissions.tsx
@@ -578,7 +578,7 @@ class UserPermissions extends React.Component<CombinedProps, State> {
     this.setState(set(lensPath(['grants', entity, idx, 'permissions']), value));
   };
 
-  setAllEntitiesTo = (e: Item) => {
+  setAllEntitiesTo = (e: Item<string>) => {
     const value = e.value === 'null' ? null : e.value;
     this.entityPerms.map((entity: GrantType) =>
       this.entitySetAllTo(entity, value as GrantLevel)()
diff --git a/packages/manager/src/features/Volumes/VolumeDrawer/ConfigSelect.tsx b/packages/manager/src/features/Volumes/VolumeDrawer/ConfigSelect.tsx
index d159b93eb28..1b7fab764ca 100644
--- a/packages/manager/src/features/Volumes/VolumeDrawer/ConfigSelect.tsx
+++ b/packages/manager/src/features/Volumes/VolumeDrawer/ConfigSelect.tsx
@@ -81,7 +81,7 @@ const ConfigSelect: React.FC<CombinedProps> = (props) => {
           options={configList}
           name={name}
           value={configList.find((thisConfig) => thisConfig.value === value)}
-          onChange={(e: Item) => {
+          onChange={(e: Item<number>) => {
             onChange(+e.value);
           }}
           onBlur={onBlur}
diff --git a/packages/manager/src/features/linodes/LinodesCreate/TabbedContent/FromAppsContent.tsx b/packages/manager/src/features/linodes/LinodesCreate/TabbedContent/FromAppsContent.tsx
index c1ec2f1b0c6..43eced5362d 100644
--- a/packages/manager/src/features/linodes/LinodesCreate/TabbedContent/FromAppsContent.tsx
+++ b/packages/manager/src/features/linodes/LinodesCreate/TabbedContent/FromAppsContent.tsx
@@ -335,6 +335,7 @@ class FromAppsContent extends React.Component<CombinedProps, State> {
               </Box>
               <Box className={classes.filter}>
                 <Select
+                  label="Select category"
                   placeholder="Select category"
                   options={appCategoryOptions}
                   onChange={this.handleSelectCategory}
diff --git a/packages/manager/src/features/linodes/LinodesDetail/LinodeBackup/RestoreToLinodeDrawer.tsx b/packages/manager/src/features/linodes/LinodesDetail/LinodeBackup/RestoreToLinodeDrawer.tsx
index 23b0bc78d2e..258c451185e 100644
--- a/packages/manager/src/features/linodes/LinodesDetail/LinodeBackup/RestoreToLinodeDrawer.tsx
+++ b/packages/manager/src/features/linodes/LinodesDetail/LinodeBackup/RestoreToLinodeDrawer.tsx
@@ -55,17 +55,19 @@ export const RestoreToLinodeDrawer: React.FC<CombinedProps> = (props) => {
   const { data: grants } = useGrants();
 
   const [overwrite, setOverwrite] = React.useState<boolean>(false);
-  const [selectedLinode, setSelectedLinode] = React.useState<string>('none');
+  const [selectedLinodeId, setSelectedLinodeId] = React.useState<number | null>(
+    linodeID
+  );
   const [errors, setErrors] = React.useState<APIError[]>([]);
 
   const reset = () => {
     setOverwrite(false);
-    setSelectedLinode('none');
+    setSelectedLinodeId(null);
     setErrors([]);
   };
 
   const restoreToLinode = () => {
-    if (!selectedLinode || selectedLinode === 'none') {
+    if (!selectedLinodeId) {
       setErrors([
         ...errors,
         ...[{ field: 'linode_id', reason: 'You must select a Linode' }],
@@ -73,7 +75,7 @@ export const RestoreToLinodeDrawer: React.FC<CombinedProps> = (props) => {
       scrollErrorIntoView();
       return;
     }
-    restoreBackup(linodeID, Number(backupID), Number(selectedLinode), overwrite)
+    restoreBackup(linodeID, Number(backupID), selectedLinodeId, overwrite)
       .then(() => {
         reset();
         onSubmit();
@@ -84,10 +86,6 @@ export const RestoreToLinodeDrawer: React.FC<CombinedProps> = (props) => {
       });
   };
 
-  const handleSelectLinode = (e: Item<string>) => {
-    setSelectedLinode(e.value);
-  };
-
   const handleToggleOverwrite = () => {
     setOverwrite((prevOverwrite) => !prevOverwrite);
   };
@@ -108,7 +106,7 @@ export const RestoreToLinodeDrawer: React.FC<CombinedProps> = (props) => {
   const overwriteError = hasErrorFor('overwrite');
   const generalError = hasErrorFor('none');
 
-  const readOnly = canEditLinode(grants, Number(selectedLinode));
+  const readOnly = canEditLinode(grants, selectedLinodeId ?? -1);
   const selectError = Boolean(linodeError) || readOnly;
 
   const linodeOptions = linodesData
@@ -138,9 +136,11 @@ export const RestoreToLinodeDrawer: React.FC<CombinedProps> = (props) => {
               'data-qa-select-linode': true,
             },
           }}
-          defaultValue={selectedLinode || ''}
+          defaultValue={linodeOptions.find(
+            (option) => option.value === selectedLinodeId
+          )}
           options={linodeOptions}
-          onChange={handleSelectLinode}
+          onChange={(item: Item<number>) => setSelectedLinodeId(item.value)}
           errorText={linodeError}
           placeholder="Select a Linode"
           isClearable={false}
diff --git a/packages/manager/src/features/linodes/LinodesDetail/LinodeRescue/DeviceSelection.tsx b/packages/manager/src/features/linodes/LinodesDetail/LinodeRescue/DeviceSelection.tsx
index a3c507cf9dd..ba9d7a8632c 100644
--- a/packages/manager/src/features/linodes/LinodesDetail/LinodeRescue/DeviceSelection.tsx
+++ b/packages/manager/src/features/linodes/LinodesDetail/LinodeRescue/DeviceSelection.tsx
@@ -101,9 +101,8 @@ const DeviceSelection: React.FC<CombinedProps> = (props) => {
         <FormControl fullWidth>
           <Select
             disabled
-            onChange={() => onChange}
-            options={[]}
-            defaultValue={'finnix'}
+            onChange={() => null}
+            defaultValue={{ label: 'finnix', value: 'finnix' }}
             name="rescueDevice_sdh"
             id="rescueDevice_sdh"
             label="/dev/sdh"
diff --git a/packages/manager/src/features/linodes/LinodesDetail/LinodeSettings/InterfaceSelect.tsx b/packages/manager/src/features/linodes/LinodesDetail/LinodeSettings/InterfaceSelect.tsx
index c9d692fb670..9fe9ad108ba 100644
--- a/packages/manager/src/features/linodes/LinodesDetail/LinodeSettings/InterfaceSelect.tsx
+++ b/packages/manager/src/features/linodes/LinodesDetail/LinodeSettings/InterfaceSelect.tsx
@@ -167,7 +167,6 @@ export const InterfaceSelect: React.FC<Props> = (props) => {
               (thisOption) => thisOption.value === purpose
             )}
             onChange={handlePurposeChange}
-            onCreate
             disabled={readOnly}
             isClearable={false}
           />
@@ -200,9 +199,9 @@ export const InterfaceSelect: React.FC<Props> = (props) => {
                   null
                 }
                 onChange={handleLabelChange}
-                createNew={handleCreateOption}
+                onCreateOption={handleCreateOption}
                 isClearable
-                disabled={readOnly}
+                isDisabled={readOnly}
                 noOptionsMessage={() =>
                   isLoading
                     ? 'Loading...'
diff --git a/packages/manager/src/features/linodes/LinodesDetail/LinodeSettings/KernelSelect.tsx b/packages/manager/src/features/linodes/LinodesDetail/LinodeSettings/KernelSelect.tsx
index 3d7c1e0b313..bcffdc99638 100644
--- a/packages/manager/src/features/linodes/LinodesDetail/LinodeSettings/KernelSelect.tsx
+++ b/packages/manager/src/features/linodes/LinodesDetail/LinodeSettings/KernelSelect.tsx
@@ -8,7 +8,7 @@ export interface Props {
   selectedKernel?: string;
   readOnly?: boolean;
   errorText?: string;
-  onChange: (selected: Item<string> | void) => void;
+  onChange: (selected: Item<string>) => void;
 }
 
 /**
@@ -39,7 +39,7 @@ export const KernelSelect: React.FC<Props> = (props) => {
 
 export const getSelectedKernelId = (
   kernelID: string | undefined,
-  options: GroupType[]
+  options: GroupType<string>[]
 ) => {
   if (!kernelID) {
     return null;