Headless WordPress + React with TypeScript \\ can't get wp-blocks working

[Starlette]

I used WPEngine's faust-scaffold-ts repo's code for my website. This was based on Faust's "Implementing TypeScript" documentation.

I am using WordPressBlocksViewer and WordPressBlocksProvider so I can choose to customize some of their core blocks if I want to change how it is displayed or add custom blocks.

Because I am using TypeScript, the documentation on changing a core block doesn't work because their examples are not meant for TypeScript. It breaks my application. I eventually found ONE small example that only shows how to create the block but not implement it.

My code:

/wp-blocks/CoreParagraph.tsx

import { gql } from '../__generated__';
import { WordPressBlock } from '@faustwp/blocks';
import { CoreParagraphFragmentFragment } from '../__generated__/graphql';

export const CoreParagraph: WordPressBlock<CoreParagraphFragmentFragment> = (
  props
) => {
  return <p>{props.attributes?.content}</p>;
};

export const fragments = {
  entry: gql(`
      fragment CoreParagraphFragment on CoreParagraph {
        attributes {
          content
          textColor
        }
      }
    `),
  key: `CoreParagraphFragment`
};

/wp-blocks/index.ts

import { CoreParagraph } from './CoreParagraph';

export default {
  CoreParagraph
};

_app.tsx WordPressBlocksProvider implementation

import '../../faust.config';
import React, { createContext, ReactElement, ReactNode, useRef } from 'react';
import { useRouter } from 'next/router';
import { FaustProvider } from '@faustwp/core';
import '../styles/colors.scss';
import '../styles/globals.scss';
import { AppProps } from 'next/app';
import { WordPressBlocksProvider } from '@faustwp/blocks';
import blocks from '../wp-blocks/index';
import { NextPage } from 'next';

export type NextPageWithLayout = NextPage & {
  getLayout?: (page: ReactElement) => ReactNode;
};

type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout;
};

export default function MyApp({ Component, pageProps }: AppPropsWithLayout) {
  const router = useRouter();
  const getLayout = Component.getLayout ?? ((page) => page);

  return (
    <FaustProvider pageProps={pageProps}>
      <WordPressBlocksProvider
        config={{
          blocks,
          theme: null
        }}
      >
        {getLayout(<Component {...pageProps} key={router.asPath} />)}
      </WordPressBlocksProvider>
    </FaustProvider>
  );
}

Page query with the fragment hardcoded

Component.query = gql(`
  fragment CoreParagraphFragment on CoreParagraph {
    attributes {
      content
      textColor
    }
  }
  query GetPage($databaseId: ID!, $asPreview: Boolean = false) {
    page(id: $databaseId, idType: DATABASE_ID, asPreview: $asPreview) {
      title
      content
			editorBlocks(flat: false) {
				__typename
				renderedHtml
				id: clientId
				parentClientId
        ...CoreParagraphFragment
			}
    }
...

Error I get from the above

Page query with the fragment included via import

Component.query = gql(`
  ${components.CoreParagraph.fragments.entry}
...

Error I get from the above

Is anyone able to tell me what I am doing wrong?