react ts変換できない

Question

ログインしているかを判定するコードを実装しました。
①のjavascriptのコードを②typescriptに直したのですが以下のエラーが表示されてしまいます。
どう修正したらいいのでしょうか？
ご教授お願いしたいです

//error
Component' は値を参照していますが、ここでは型として使用されています。'typeof Component' を意図していましたか?

①
import Router from 'next/router';
import React, { Component } from 'react';
import AuthJudg from './Authjudg';

export default function Auth(Component) {
  const auth = new AuthJudg();
  return class Authenticated extends Component {
    constructor(props) {
      super(props);
      this.state = { isLoading: true };
    }
    componentDidMount() {
      if (!auth.loggedIn()) {
        Router.push('/login');
      }
      this.setState({ isLoading: false });
    }
    render() {
      return (
        <>
          {this.state.isLoading ? (
            <div>Loading</div>
          ) : (
            <Component {...this.props} />
          )}
        </>
      );
    }
  };
}

②
import Router from 'next/router';
import { useEffect, useState } from 'react';
import Authjudg from './Authjudg';

export default function withAuth(Component) {
  const Auth = new Authjudg();
  const Authenticated = () => {
    const [isLoading, setLoading] = useState(true);
    useEffect(() => {
      if (!Auth.loggedIn()) {
        Router.push('/login');
      }
      setLoading(false);
    });
    if (isLoading) return <Component />;
  };
  return Authenticated;
}

Answer 1

ファイルの拡張子がtsになっていませんか？
もしそうならtsxに変更するとなおると思います。
（同じエラー経験しました。）

Answer 2

export default function Auth(Component) {
  //略
}

ここじゃないですか？これだとfunctionの引数の変数名をComponentにすることになってしまいます
引数の型は次のように定義します。

function test( foo:string ):void {
  //略
}

fooが変数名、stringが型名、voidが関数の返却値の型です。