How to combine Suspense and dynamic import in json?

Question

I want to dynamically import a json and have searched for some websites and written down this. However, as the picture depicts, it is stuck in infinite loop. There is lot of info about React.lazy but this is not a component. How should I do this? Thank you.

import { Suspense } from 'react';
interface DailyTableProps {
  year?: number;
  month?: number;
}

function wrapPromise(promise: Promise<any>) {
  let status = "pending", res: any;
  const suspender = promise.then((resolve) => {
    status = "resolved";
    console.log("resolved");
    res = resolve;
  }, (err) => {
    status = "error";
    res = err;
    console.error(err);
  })
  return {
    read() {
      switch (status) {
        case "pending": throw suspender;
        case "error": throw res;
        case "resolved": return res;
        default: console.log("default"); break;
      }
    }
  }
}


function getData(year: number) {
  return wrapPromise(import(`./assets/${year}.json`));
}

export default function DailyTable(props: DailyTableProps) {
  const { year = 2023, month = 0 } = props;
  const data = getData(year).read();
  return (
    <Suspense fallback={<p>loading</p>}>
      {data.daily.length > 0 &&
        <ul>
          {data.daily.month[0].map((v: any, k: any) => <li key={k}>{v}</li>)}
        </ul>
      }

    </Suspense>
  )
}