I have a typescript error when using jwt-refresh-link

Question

This is my frist try in typescript. I am fowllowing a youtube user auth jwt tutorial, which is dealing with token-refresh-link. I met a problem, but the tutorial video didn't have this issue, and I don't know how to fix it.

Here is the error log:

H:/jwt-auth/web/src/index.tsx
TypeScript error in H:/jwt-auth/web/src/index.tsx(48,5):
Type 'TokenRefreshLink<string>' is not assignable to type 'ApolloLink'.
Types of property 'split' are incompatible.
Type '(test: (op: import("H:/jwt-auth/web/node_modules/@apollo/client/link/core/types").Operation) => boolean, left: import("H:/jwt-auth/web/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink | import("H:/jwt-auth/web/node_modules/@apollo/client/link/core/types").RequestHandler, right?: import("H:/jwt-auth/web/...' is not assignable to type '(test: (op: import("H:/jwt-auth/web/node_modules/apollo-link/lib/types").Operation) => boolean, left: import("H:/jwt-auth/web/node_modules/apollo-link/lib/link").ApolloLink | import("H:/jwt-auth/web/node_modules/apollo-link/lib/types").RequestHandler, right?: import("H:/jwt-auth/web/node_modules/apollo-link/lib/link...'.
          Types of parameters 'test' and 'test' are incompatible.
            Types of parameters 'op' and 'op' are incompatible.
              Property 'toKey' is missing in type 'import("H:/jwt-auth/web/node_modules/@apollo/client/link/core/types").Operation' but required in type 'import("H:/jwt-auth/web/node_modules/apollo-link/lib/types").Operation'.  TS2322
  46 | const client = new ApolloClient({
    47 |   link: ApolloLink.from([
  > 48 |     new TokenRefreshLink({
       |     ^
    49 |       accessTokenField: "accessToken",
    50 |       isTokenValidOrUndefined: () => {
    51 |         const token = getAccessToken();

And this is my code:

 const client = new ApolloClient({
      link: ApolloLink.from([
        new TokenRefreshLink({
          accessTokenField: "accessToken",
          isTokenValidOrUndefined: () => {
            const token = getAccessToken();

            if (!token) {
              return true;
            }

            try {
              const { exp } = jwtDecode(token);
              if (Date.now() >= exp * 1000) {
                return false;
              } else {
                return true;
              }
            } catch {
              return false;
            }
          },
          fetchAccessToken: () => {
            return fetch("http://localhost:4000/refresh_token", {
              method: "POST",
              credentials: "include",
            });
          },
          handleFetch: (accessToken) => {
            return setAccessToken(accessToken);
          },
          handleError: (err) => {
            console.warn("Your refresh token is invalid.Try ro relogin");
            console.error(err);
          },
        }),
        onError(({ graphQLErrors, networkError }) => {
          console.log(graphQLErrors);
          console.log(networkError);
        }),
        requestLink,
        new HttpLink({
          uri: "http://localhost:4000/graphql",
          credentials: "include",
        }),
      ]),
      cache,
    });