VS Code cannot parse HTML part of tsx file - reactjs

Question

For some files in my project, VS Code highlights HTML parts of code as errors, but the project builds and runs fine. So there are no actual errors, but VS Code says that almost every line has an error.
Other examples are:
'UserProvider' refers to a value, but is being used as a type here.
Did you mean 'typeof UserProvider'? ts(2749)
'>' expected.ts(1005)
...
Here is a sample of this code that creates this mess.
import React from "react";
import "./App.css";
import { UserConsumer, UserProvider } from "./contexts/UserContext";
import { Routes, Route, Link, Navigate } from "react-router-dom";
import { Button, Layout, Menu, Spin } from "antd";
import {
DashboardOutlined,
DollarOutlined,
HomeOutlined,
LogoutOutlined,
WarningOutlined
} from "#ant-design/icons";
import FoodEntries from "./components/FoodEntries";
import Login from "./components/Login";
import CalorieLimit from "./components/CalorieLimit";
import SpendLimit from "./components/SpendLimit";
import Admin from "./components/Admin";
const { Sider } = Layout;
const App = () => {
return (
<UserProvider>
<UserConsumer>
{({ logout, authenticated, isAdmin, loadingAuthState }) => (
<div className="App">
<Spin tip="Loading..." spinning={loadingAuthState}>
<Layout>
{authenticated && (
<Sider
breakpoint="lg"
collapsedWidth="0"
onBreakpoint={broken => {
console.log(broken);
}}
onCollapse={(collapsed, type) => {
console.log(collapsed, type);
}}
>
<Menu
theme="light"
mode="inline"
defaultSelectedKeys={["home"]}
items={[
{
key: "home",
icon: React.createElement(HomeOutlined),
label: <Link to="/">Food Entries</Link>
},
{
key: "calories",
icon: React.createElement(WarningOutlined),
label: <Link to="/calories">Calorie Limit</Link>
},
{
key: "spend",
icon: React.createElement(DollarOutlined),
label: <Link to="/spend">Spend Limit</Link>
},
isAdmin
? {
key: "admin",
icon: React.createElement(DashboardOutlined),
label: <Link to="/admin">Admin</Link>
}
: null,
{
type: "divider"
},
{
key: "logout",
danger: true,
icon: React.createElement(LogoutOutlined),
label: (
<Button onClick={logout} type="link">
Logout
</Button>
)
}
]}
/>
</Sider>
)}
<Routes>
<Route path="/" element={<FoodEntries />} />
<Route path="/calories" element={<CalorieLimit />} />
<Route path="/spend" element={<SpendLimit />} />
<Route path="/admin" element={<Admin />} />
<Route path="/login" element={<Login />} />
<Route path="*" element={<Navigate to="/login" />} />
</Routes>
</Layout>
</Spin>
</div>
)}
</UserConsumer>
</UserProvider>
);
};
export default App;