In my blog page, I used more @ts-expect-error than I would have liked to due to various reasons, I wonder if I can define the type better and reduce the use of @ts-expect-error, as that's a bit too hacky.

Here's the full code: https://github.com/mwskwong/resume/blob/feature/blog/app/blog/%5Bslug%5D/page.tsx

A short summary:

1. The data-* props are not defined in the prop type.
2. The ref prop is in type LegacyRef while my components (MUI in this case) expects to be RefObject.

<MDXRemote
  components={{
    code: (props) => {
      // @ts-expect-error (1) data attribute auto injected by rehype-pretty-code
      const inlineCode = !props["data-language"];
      
      if (inlineCode) {
        const { color, ...rest } = props;
        return (
          // @ts-expect-error (2) LegacyRef passed to RefObject
          <Typography {/* props omitted... */} {...rest} />
        );
      }

      // @ts-expect-error (2) LegacyRef passed to RefObject
      return <Box {/* props omitted... */} {...props} />;
    },
  }}
/>