Conversion to Firebase 9 from version 7 giving me FirebaseError: Expected type 'DocumentReference', but it was: a custom Query object

I am trying to recreate a chat app clone with firebase version 9 from firebase version 7.
I am trying to load the chat messages for the two users when the user navigates to the specific chat.

I have tried everything but can’t seem to solve the problem. The following is the old piece of code from firebase version 7

export async function getServerSideProps(context) {
  const ref = db.collection('chats').doc(context.query.id);

  // Prep the messages array for the chat
  const messagesRes = await ref
    .collection('messages')
    .orderBy('timestamp', 'asc')
    .get(); 

  const messages = messagesRes.docs.map((doc) => {
    return {
      ...doc.data(),
      id: doc.id,
    }
  }).map(messages => ({
    ...messages,
    timestamp: messages.timestamp.toDate().getTime(),
  }))

  // Prep the users array for the chat
  const chatRes = await ref.get();
  const chat = {
    ...chatRes.data(),
    id: chatRes.id,
  }

  return {
    props: {
      messages: JSON.stringify(messages),
      chat,
    }
  }
}

function ChatConversation({
  chat,
  messages
}) {
  const [user] = useAuthState(auth);

  const endOfMessagesRef = useRef(null);

  const scrollToBottom = () => {
    endOfMessagesRef.current.scrollIntoView({
      behaviour: 'smooth',
      block: 'start',
    });
  };

  return (
    <>
      <ChatScreen chat={chat} messages={messages} />
    </>
  )
}

Here is the rewritten code in firebase version 9:

export async function getServerSideProps(context) {
  const ref = doc(db, "chats", context.query.id);

  // Prep the messages array for the chat

  const messagesRef = collection(db, 'chats', context.query.id, 'messages');

  const messagesRes = await getDocs(query(messagesRef, orderBy("timestamp", "asc")))

  const messages = messagesRes.docs.map((doc) => {
    return {
      ...doc.data(),
      id: doc.id,
    }
  }).map(messages => ({
    ...messages,
    timestamp: messages.timestamp.toDate().getTime(),
  }))

  // Prep the users array for the chat
  const chatRes = await getDocs(ref);
  const chat = {
    ...chatRes.data(),
    id: chatRes.id,
  }

  return {
    props: {
      messages: JSON.stringify(messages),
      chat,
    }
  }
}

function ChatConversation({
  chat,
  messages
}) {
  const [user] = useAuthState(auth);

  return (
    <>
      <ChatScreen chat={chat} messages={messages} />
    </>
  )
}

What can I do to get rid of this error?