I have a Next.js App Router app structure setup in VS Code. For some reason, when I type in an opening div tag and close it within a {} in a React component, it does not seem to close the div. I tried other tags and they seem to work but when I do it with div it does not. It seems to work in a TypeScript JSX file (it closes the div tag) but not in this specific code for some reason.

Error which comes up:

Demo:

Code:

"use client";

import type { chats as chatsSchema } from "@/server/db/schema";
import type { InferSelectModel } from "drizzle-orm";
import { type Session } from "next-auth";
import Link from "next/link";
import { Button } from "./ui/button";
import { IconPlus } from "./ui/icons";

export function Sidebar({
  chats,
  session,
}: {
  chats: InferSelectModel<typeof chatsSchema>[];
  session: Session | null;
}) {
  return (
    <div className="relative h-full w-[239px] overflow-y-auto overflow-x-hidden">
      {!session && (
        <div>
          <span>Log in to save chat history</span>
          <Button variant="link" asChild className="-ml-2">
            <Link href="/login">Login</Link>
          </Button>
        </div>
      )}
      <Button asChild>
        <a href="/">
          <IconPlus className="-translate-x-2 stroke-2" />
          New Chat
        </a>
      </Button>
      {session && <div>} // does not auto close tag here
    </div>
  );
}

VS Code bottom bar:

VS Code Version:

Version: 1.88.1 (user setup)
Commit: e170252f762678dec6ca2cc69aba1570769a5d39
Date: 2024-04-10T17:41:02.734Z
Electron: 28.2.8
ElectronBuildId: 27744544
Chromium: 120.0.6099.291
Node.js: 18.18.2
V8: 12.0.267.19-electron.0
OS: Windows_NT x64 10.0.22631