No overload matches app.use('/graphql', graphQLServer); Hasura GraphQL

Question

I was following the hasura backend guide where the server is initalized as below.

import { readFileSync } from "node:fs";
import { createServer } from "@graphql-yoga/node";
import { Resolvers } from "./gql/server/resolvers-types";

const typeDefs = readFileSync("./schema.graphql", "utf8");

const resolvers: Resolvers = {
  Query: {
    posts: async () => {
      return [
        {
          id: 1,
          title: "hi",
        },
      ];
    },
  },
};

const graphQLServer = createServer({ schema: { typeDefs, resolvers } });

But @graphql-yoga/node is deprecated and replaced with graphql-yoga with the following documentation code.

import { createServer } from 'node:http'
import { createSchema, createYoga } from 'graphql-yoga'

const yoga = createYoga({
  schema: createSchema({
    typeDefs: /* GraphQL */ `
      type Query {
        hello: String
      }
    `,
    resolvers: {
      Query: {
        hello: () => 'Hello from Yoga!'
      }
    }
  })
})

const server = createServer(yoga)

server.listen(4000, () => {
  console.info('Server is running on http://localhost:4000/graphql')
})

app.use('/graphql', graphQLServer); shows No overload matches this call.

This is my main.ts code.

const typeDefs = readFileSync('./schema.graphql', 'utf8')

const resolvers: Resolvers = {
  Query: {
    posts: async () => {
      return [{
        id: 1,
        title: "hi"
      }]
    }
  }
}

const graphQLServer = createServer(createYoga({ schema: createSchema({ typeDefs, resolvers }) }));

const app = express();

app.use(express.json());

app.use('/graphql', graphQLServer);