How do I get React to accept my Promise of data?

When I try to import data via prisma from SQL into React, I get this error: Exception has occurred: Error: Abort fetching component for route: "/dashboard/bond-market" at handleCancelled (webpack-internal:///./node_modules/next/dist/shared/lib/router/router.js:558:19) at _callee6$ (webpack-internal:///./node_modules/next/dist/shared/lib/router/router.js:2157:17) at tryCatch (webpack-internal:///./node_modules/next/dist/compiled/regenerator-runtime/runtime.js:45:40) at Generator.invoke [as _invoke] (webpack-internal:///./node_modules/next/dist/compiled/regenerator-runtime/runtime.js:274:22) at prototype. [as next] (webpack-internal:///./node_modules/next/dist/compiled/regenerator-runtime/runtime.js:97:21) at asyncGeneratorStep (webpack-internal:///./node_modules/next/dist/shared/lib/router/router.js:72:24) at _next (webpack-internal:///./node_modules/next/dist/shared/lib/router/router.js:94:9)

I believe that it's an issue with using prisma to import data from SQL to React.

Below is the relevant code:

playIndex.tsx: import { Key, ReactChild, ReactFragment, ReactPortal } from "react";

// pages/index.js

export const getServerSideProps = async () => {
    const res = await fetch("http://localhost:8081/api/my10y");
    const my10y = await res.json();
    return {
      props: { my10y },
    };
  };

  export function MY10YTest(props: { my10y: { DateTime: Key | null | undefined; Value: boolean | ReactChild | ReactFragment | ReactPortal | null | undefined; }[]; }) {
  return (
    <div>
      {props.my10y.map((p: { DateTime: Key | null | undefined; Value: boolean | ReactChild | ReactFragment | ReactPortal | null | undefined; }) => {
        return (
          <div key={p.DateTime}>
            <p>
              {p.Value}%
            </p>
          </div>
        );
      })}
    </div>
  );
}

my10y.tsx

// pages/api/my10y.tsx
import { Prisma, PrismaClient } from "@prisma/client";

let prisma: PrismaClient<Prisma.PrismaClientOptions, never, Prisma.RejectOnNotFound | Prisma.RejectPerOperation | undefined>;

prisma = new PrismaClient();

//export default prisma;

export default async function handle(req: any, res: { json: (arg0: any) => void; }) {
  const my10y = await prisma.fRED_Market_Yield_10Y.findMany();
  res.json(my10y);
}

bond-market.tsx

import { /*useState,*/ ReactElement } from 'react';

// material-ui
import {
  Grid,
} from '@mui/material';

// project import
import Layout from 'layout';
import Page from 'components/Page';
import AnalyticsDataCard from 'components/cards/statistics/AnalyticsDataCard';
import MY01YChart from 'sections/dashboard/analytics/MY01YChart';
import MY02YChart from 'sections/dashboard/analytics/MY02YChart';
import MY10YChart from 'sections/dashboard/analytics/MY10YChart';
import { getServerSideProps, MY10YTest } from 'pages/api/playIndex';


// ==============================|| DASHBOARD - ANALYTICS ||============================== //

const DashboardAnalytics = () => {
  //const theme = useTheme();
  //const [value, setValue] = useState('today');
  //const [slot, setSlot] = useState('week');
  //const [quantity, setQuantity] = useState('By volume');

  /*const handleQuantity = (e: SelectChangeEvent) => {
    setQuantity(e.target.value as string);
  };

  const handleChange = (event: React.MouseEvent<HTMLElement>, newAlignment: string) => {
    if (newAlignment) setSlot(newAlignment);
  };*/

  return (
    <Page title="Bond Market Dashboard">
      <Grid container rowSpacing={4.5} columnSpacing={3}>
        {/* row 1 */}
        <Grid item xs={12} sm={6} md={4} lg={3}>
          <AnalyticsDataCard title="Market Yield 1-Year Treasury Bonds" count="23" percentage={-95.3} isLoss={true}>
            <MY01YChart />
          </AnalyticsDataCard>
        </Grid>
        <Grid item xs={12} sm={6} md={4} lg={3}>
          <AnalyticsDataCard title="Market Yield 2-Year Treasury Bonds" count="16000" percentage={-2} isLoss={true}>
            <MY02YChart />
          </AnalyticsDataCard>
        </Grid>
        <Grid item xs={12} sm={6} md={4} lg={3}>
          <AnalyticsDataCard title="Market Yield 10-Year Treasury Bonds" count="16000" percentage={-2} isLoss={true}>
            <MY10YChart />
          </AnalyticsDataCard>
        </Grid>
        <Grid item xs={12} sm={6} md={4} lg={3}>
          <AnalyticsDataCard title="Market Yield 10-Year Treasury Bonds-Experimental" count="16000" percentage={-2} isLoss={true}>
            <MY10YTest my10y={[]} />
          </AnalyticsDataCard>
        </Grid>

        <Grid item md={8} sx={{ display: { sm: 'none', md: 'block', lg: 'none' } }} />
      </Grid>
    </Page>
  );
};

DashboardAnalytics.getLayout = function getLayout(page: ReactElement) {
  return <Layout>{page}</Layout>;
};

export default DashboardAnalytics;