diff --git a/.changeset/soft-berries-obey.md b/.changeset/soft-berries-obey.md
new file mode 100644
index 0000000000..bf46541737
--- /dev/null
+++ b/.changeset/soft-berries-obey.md
@@ -0,0 +1,8 @@
+---
+'@leafygreen-ui/hooks': major
+---
+
+- Extends `useControlledValue` to accept any type.
+  - Adds `initialValue` argument. Used for setting the initial value for uncontrolled components. Without this we may encounter a React error for switching between controlled/uncontrolled inputs
+  - Changes signature of `onChange` argument to be a simple setter function (`(value: T) => void`)
+  - Changes return object to include only `isControlled`, `value` and an `updateValue` setter function
diff --git a/packages/hooks/package.json b/packages/hooks/package.json
index f4011a9b8a..2a3905ab20 100644
--- a/packages/hooks/package.json
+++ b/packages/hooks/package.json
@@ -22,6 +22,7 @@
     "access": "public"
   },
   "dependencies": {
+    "@leafygreen-ui/lib": "^11.0.0",
     "lodash": "^4.17.21"
   },
   "gitHead": "dd71a2d404218ccec2e657df9c0263dc1c15b9e0",
diff --git a/packages/hooks/src/useControlledValue/useControlledValue.spec.ts b/packages/hooks/src/useControlledValue/useControlledValue.spec.ts
deleted file mode 100644
index 8ebc6f789a..0000000000
--- a/packages/hooks/src/useControlledValue/useControlledValue.spec.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { ChangeEvent } from 'react';
-import { act } from 'react-test-renderer';
-import { renderHook } from '@testing-library/react-hooks';
-
-import { useControlledValue } from './useControlledValue';
-
-describe('packages/lib/useControlledValue', () => {
-  test('with controlled component', async () => {
-    const value = 'apple';
-    const handler = jest.fn();
-    const {
-      result: { current },
-    } = renderHook(() => useControlledValue(value as string, handler));
-    expect(current.isControlled).toBe(true);
-    expect(current.value).toBe(value);
-
-    act(() => {
-      current.handleChange({ target: { value: 'banana' } } as ChangeEvent<any>);
-      current.setUncontrolledValue('banana');
-    });
-    expect(handler).toHaveBeenCalledWith(
-      expect.objectContaining({ target: { value: 'banana' } }),
-    );
-    expect(current.value).toBe('apple');
-  });
-
-  test('with uncontrolled component', async () => {
-    const value = undefined;
-    const handler = jest.fn();
-    const {
-      result: { current },
-    } = renderHook(() => useControlledValue(value, handler));
-    expect(current.isControlled).toBe(false);
-    expect(current.value).toBe('');
-
-    act(() => {
-      current.handleChange({ target: { value: 'apple' } } as ChangeEvent<any>);
-      expect(handler).toHaveBeenCalledWith(
-        expect.objectContaining({ target: { value: 'apple' } }),
-      );
-    });
-  });
-});
diff --git a/packages/hooks/src/useControlledValue/useControlledValue.spec.tsx b/packages/hooks/src/useControlledValue/useControlledValue.spec.tsx
new file mode 100644
index 0000000000..7f3ad040d2
--- /dev/null
+++ b/packages/hooks/src/useControlledValue/useControlledValue.spec.tsx
@@ -0,0 +1,264 @@
+import React from 'react';
+import { ChangeEventHandler } from 'react';
+import { render } from '@testing-library/react';
+import { renderHook, RenderHookResult } from '@testing-library/react-hooks';
+import userEvent from '@testing-library/user-event';
+
+import { useControlledValue } from './useControlledValue';
+
+const errorSpy = jest.spyOn(console, 'error');
+
+const renderUseControlledValueHook = <T extends any>(
+  ...[valueProp, callback, initial]: Parameters<typeof useControlledValue<T>>
+): RenderHookResult<T, ReturnType<typeof useControlledValue<T>>> => {
+  const result = renderHook(v => useControlledValue(v, callback, initial), {
+    initialProps: valueProp,
+  });
+
+  return { ...result };
+};
+
+describe('packages/hooks/useControlledValue', () => {
+  beforeEach(() => {
+    errorSpy.mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    errorSpy.mockReset();
+  });
+
+  test('rendering without any arguments sets hook to uncontrolled', () => {
+    const { result } = renderUseControlledValueHook();
+    expect(result.current.isControlled).toEqual(false);
+  });
+
+  describe('accepts various value types', () => {
+    test('accepts number values', () => {
+      const { result } = renderUseControlledValueHook(5);
+      expect(result.current.value).toBe(5);
+    });
+
+    test('accepts boolean values', () => {
+      const { result } = renderUseControlledValueHook(false);
+      expect(result.current.value).toBe(false);
+    });
+
+    test('accepts array values', () => {
+      const arr = ['foo', 'bar'];
+      const { result } = renderUseControlledValueHook(arr);
+      expect(result.current.value).toBe(arr);
+    });
+
+    test('accepts object values', () => {
+      const obj = { foo: 'foo', bar: 'bar' };
+      const { result } = renderUseControlledValueHook(obj);
+      expect(result.current.value).toBe(obj);
+    });
+
+    test('accepts date values', () => {
+      const date = new Date('2023-08-23');
+      const { result } = renderUseControlledValueHook(date);
+      expect(result.current.value).toBe(date);
+    });
+
+    test('accepts multiple/union types', () => {
+      const { result, rerender } = renderUseControlledValueHook<
+        string | number
+      >(5);
+      expect(result.current.value).toBe(5);
+      rerender('foo');
+      expect(result.current.value).toBe('foo');
+    });
+  });
+
+  describe('Controlled', () => {
+    test('rendering with a value sets value and isControlled', () => {
+      const { result } = renderUseControlledValueHook('apple');
+      expect(result.current.isControlled).toBe(true);
+      expect(result.current.value).toBe('apple');
+    });
+
+    test('rerendering from initial undefined sets value and isControlled', async () => {
+      const { rerender, result } = renderUseControlledValueHook();
+      rerender('apple');
+      expect(result.current.isControlled).toBe(true);
+      expect(result.current.value).toEqual('apple');
+    });
+
+    test('rerendering with a new value changes the value', () => {
+      const { rerender, result } = renderUseControlledValueHook('apple');
+      expect(result.current.value).toBe('apple');
+      rerender('banana');
+      expect(result.current.value).toBe('banana');
+    });
+
+    test('provided handler is called within `updateValue`', () => {
+      const handler = jest.fn();
+      const { result } = renderUseControlledValueHook<string>('apple', handler);
+      result.current.updateValue('banana');
+      expect(handler).toHaveBeenCalledWith('banana');
+    });
+
+    test('hook value does not change when `updateValue` is called', () => {
+      const { result } = renderUseControlledValueHook<string>('apple');
+      result.current.updateValue('banana');
+      // value doesn't change unless we explicitly change it
+      expect(result.current.value).toBe('apple');
+    });
+
+    test('setting value to undefined should keep the component controlled', () => {
+      const { rerender, result } = renderUseControlledValueHook('apple');
+      expect(result.current.isControlled).toBe(true);
+      rerender(undefined);
+      expect(result.current.isControlled).toBe(true);
+    });
+
+    test('initial value is ignored when controlled', () => {
+      const { result } = renderUseControlledValueHook<string>(
+        'apple',
+        () => {},
+        'banana',
+      );
+      expect(result.current.value).toBe('apple');
+    });
+  });
+
+  describe('Uncontrolled', () => {
+    test('calling without a value sets value to `initialValue`', () => {
+      const {
+        result: { current },
+      } = renderUseControlledValueHook(undefined, () => {}, 'apple');
+
+      expect(current.isControlled).toBe(false);
+      expect(current.value).toBe('apple');
+    });
+
+    test('provided handler is called within `updateValue`', () => {
+      const handler = jest.fn();
+      const {
+        result: { current },
+      } = renderUseControlledValueHook(undefined, handler);
+
+      current.updateValue('apple');
+      expect(handler).toHaveBeenCalledWith('apple');
+    });
+
+    test('updateValue updates the value', () => {
+      const { result } = renderUseControlledValueHook<string>(undefined);
+      result.current.updateValue('banana');
+      expect(result.current.value).toBe('banana');
+    });
+  });
+
+  describe('Within test component', () => {
+    const TestComponent = ({
+      valueProp,
+      handlerProp,
+    }: {
+      valueProp?: string;
+      handlerProp?: (val?: string) => void;
+    }) => {
+      const initialVal = '';
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      const { value, updateValue } = useControlledValue(
+        valueProp,
+        handlerProp,
+        initialVal,
+      );
+
+      const handleChange: ChangeEventHandler<HTMLInputElement> = e => {
+        updateValue(e.target.value);
+      };
+
+      return (
+        <>
+          <input
+            data-testid="test-input"
+            value={value}
+            onChange={handleChange}
+          />
+          <button
+            data-testid="test-button"
+            onClick={() => updateValue('carrot')}
+          />
+        </>
+      );
+    };
+
+    describe('Controlled', () => {
+      test('initially renders with a value', () => {
+        const result = render(<TestComponent valueProp="apple" />);
+        const input = result.getByTestId('test-input');
+        expect(input).toHaveValue('apple');
+      });
+
+      test('responds to value changes', () => {
+        const result = render(<TestComponent valueProp="apple" />);
+        const input = result.getByTestId('test-input');
+        result.rerender(<TestComponent valueProp="banana" />);
+        expect(input).toHaveValue('banana');
+      });
+
+      test('user interaction triggers handler', () => {
+        const handler = jest.fn();
+        const result = render(
+          <TestComponent valueProp="apple" handlerProp={handler} />,
+        );
+        const input = result.getByTestId('test-input');
+        userEvent.type(input, 'b');
+        expect(handler).toHaveBeenCalledWith(expect.stringContaining('b'));
+      });
+
+      test('user interaction does not change the element value', () => {
+        const result = render(<TestComponent valueProp="apple" />);
+        const input = result.getByTestId('test-input');
+        userEvent.type(input, 'b');
+        expect(input).toHaveValue('apple');
+      });
+
+      // eslint-disable-next-line jest/no-disabled-tests
+      test.skip('user interaction does not change the element value when initially undefined', () => {
+        const handler = jest.fn();
+        const result = render(
+          <TestComponent valueProp={undefined} handlerProp={handler} />,
+        );
+        const input = result.getByTestId('test-input');
+        userEvent.type(input, 'b');
+        expect(input).toHaveValue('apple');
+      });
+    });
+
+    describe('Uncontrolled', () => {
+      test('initially renders without a value', () => {
+        const result = render(<TestComponent />);
+        const input = result.getByTestId('test-input');
+        expect(input).toHaveValue('');
+        expect(errorSpy).not.toHaveBeenCalled();
+      });
+
+      test('user interaction triggers handler', () => {
+        const handler = jest.fn();
+        const result = render(<TestComponent handlerProp={handler} />);
+        const input = result.getByTestId('test-input');
+        userEvent.type(input, 'b');
+        expect(handler).toHaveBeenCalled();
+      });
+
+      test('user interaction does not change the element value', () => {
+        const handler = jest.fn();
+        const result = render(<TestComponent handlerProp={handler} />);
+        const input = result.getByTestId('test-input');
+        userEvent.type(input, 'banana');
+        expect(input).toHaveValue('banana');
+      });
+
+      test('clicking the button updates the value', () => {
+        const result = render(<TestComponent />);
+        const input = result.getByTestId('test-input');
+        const button = result.getByTestId('test-button');
+        userEvent.click(button);
+        expect(input).toHaveValue('carrot');
+      });
+    });
+  });
+});
diff --git a/packages/hooks/src/useControlledValue/useControlledValue.ts b/packages/hooks/src/useControlledValue/useControlledValue.ts
index dbc6120427..e55d570c17 100644
--- a/packages/hooks/src/useControlledValue/useControlledValue.ts
+++ b/packages/hooks/src/useControlledValue/useControlledValue.ts
@@ -1,51 +1,92 @@
-import { ChangeEventHandler, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import isUndefined from 'lodash/isUndefined';
 
-interface ControlledValueReturnObject<T extends string> {
+import { consoleOnce } from '@leafygreen-ui/lib';
+
+import usePrevious from '../usePrevious';
+
+interface ControlledValueReturnObject<T extends any> {
   /** Whether the value is controlled */
   isControlled: boolean;
 
   /** The controlled or uncontrolled value */
   value: T;
 
-  /** A ChangeEventHandler to assign to any onChange event */
-  handleChange: ChangeEventHandler<any>;
-
   /**
-   * A setter for the internal value.
-   * Does not change the controlled value if the provided value has not changed.
+   * Either updates the uncontrolled value,
+   * or calls the provided `onChange` callback
    */
-  setUncontrolledValue: React.Dispatch<React.SetStateAction<T>>;
+  updateValue: (newVal?: T, ...args: Array<any>) => void;
 }
 
 /**
  * A hook that enables a component to be both controlled or uncontrolled.
  *
- * Returns a {@link ControlledValueReturnObject} with the controlled or uncontrolled `value`,
- * `onChange` & `onClear` handlers, a `setInternalValue` setter, and a boolean `isControlled`
+ * Returns a {@link ControlledValueReturnObject}
  */
-export const useControlledValue = <T extends string>(
-  controlledValue?: T,
-  changeHandler?: ChangeEventHandler<any>,
-): ControlledValueReturnObject<T> => {
-  const isControlled = !isUndefined(controlledValue);
-
-  // Keep track of the uncontrolled value state internally
-  const [uncontrolledValue, setUncontrolledValue] = useState<T>('' as T);
-
-  // Create a change event handler that either updates the internal state
-  // or fires an external change handler
-  const handleChange: ChangeEventHandler<any> = e => {
-    changeHandler?.(e);
+export const useControlledValue = <T extends any>(
+  valueProp?: T,
+  onChange?: (val?: T, ...args: Array<any>) => void,
+  initialProp?: T,
+): ControlledValueReturnObject<T | undefined> => {
+  // Initially set isControlled to the existence of `valueProp`.
+  // If the value prop changes from undefined to something defined,
+  // then isControlled is set to true,
+  // and will remain true for the life of the component
+  const isControlled: boolean = useMemo(() => {
+    return isControlled || !isUndefined(valueProp);
+  }, [valueProp]);
+  const wasControlled = usePrevious(isControlled);
+
+  useEffect(() => {
+    if (isUndefined(isControlled) || isUndefined(wasControlled)) return;
+
+    if (isControlled !== wasControlled) {
+      const err = `WARN: A component changed from ${
+        wasControlled ? 'controlled' : 'uncontrolled'
+      } to ${
+        isControlled ? 'controlled' : 'uncontrolled'
+      }. This can cause issues with React states. ${
+        isControlled
+          ? 'To control a component but have an initially empty input, consider setting the `value` prop to `null`.'
+          : ''
+      }`;
+
+      consoleOnce.warn(err);
+    }
+  }, [isControlled, wasControlled]);
+
+  // We set the initial value to either the `value`
+  // or the temporary `initialValue` prop
+  const initialValue = useMemo(
+    () => (isControlled ? valueProp : initialProp),
+    [initialProp, isControlled, valueProp],
+  );
+
+  // Keep track of the internal value state
+  const [uncontrolledValue, setUncontrolledValue] = useState<T | undefined>(
+    initialValue,
+  );
+
+  // The returned value is wither the provided value prop
+  // or the uncontrolled value
+  const value = useMemo(
+    () => (isControlled ? valueProp : uncontrolledValue),
+    [isControlled, uncontrolledValue, valueProp],
+  );
+
+  // A wrapper around `handleChange` that fires a simulated event
+  const updateValue = (newVal: T | undefined) => {
     if (!isControlled) {
-      setUncontrolledValue(e.target.value as T);
+      setUncontrolledValue(newVal);
     }
+
+    onChange?.(newVal);
   };
 
   return {
     isControlled,
-    value: isControlled ? controlledValue : uncontrolledValue,
-    handleChange,
-    setUncontrolledValue,
+    value,
+    updateValue,
   };
 };
diff --git a/packages/hooks/tsconfig.json b/packages/hooks/tsconfig.json
index 9f2d965a63..a2786ad64a 100644
--- a/packages/hooks/tsconfig.json
+++ b/packages/hooks/tsconfig.json
@@ -14,5 +14,9 @@
     "src/**/*"
   ],
   "exclude": ["**/*.spec.*", "**/*.story.*"],
-  "references": []
+  "references": [
+    {
+      "path": "../lib"
+    }
+  ]
 }