خطأ في مكون HOC في React بإستخدام typescript

مرحبًا، أحاول عمل مكون HOC في React بإستخدام typescript لكي أتحكم في نظام Authentication لكن عند تنفيذ الكود يظهر لي الخطأ التالي:

auth.ts:12:3 - error TS1005: '>' expected.
12     return <WrappedComponent {...this.props} />;

هنا الكود الخالص بي والذي يظهر هذا الخطأ في ملف auth.ts:

import * as React from 'react';
import { context } from 'next';

export const withAuthSync = (WrappedComponent: ComponentExtra) => class extends React.Component {
  static async getInitialProps(ctx: context) {
    const authToken = auth(ctx);
    const allProps = WrappedComponent.getInitialProps && (await WrappedComponent.getInitialProps(ctx));
    return { ...allProps, authToken };
  }

  render() {
    // السطر التالي هو ما يسبب الخطأ على ما أظن
    return <WrappedComponent {...this.props} />;
  }
};

لا أعلم لماذا يتم إظهار كود JSX على أنه خطأ