I am using typescript to write a refine app

import React from 'react';
import { Card } from 'antd'
import { Image } from 'antd';
import { Typography } from 'antd/lib';
import { data, upcomingClasses, classDetails, user } from '../constants/dashboard';
import { AuditOutlined, BookOutlined, UserAddOutlined, UserOutlined } from '@ant-design/icons';

const {Title} = Typography


export const TakeAttendance = () => {
  return (
    <>
        <div style={{
            background: "#519bff",
            width: "30%",
            height: "70px",
            position: "absolute",
            right: 950,
            borderTopRightRadius: "15px",
            borderBottomRightRadius: "15px",
            zIndex: 1,
            margin: "20px",
            display: "flex",
            }}>
                <Image
                width={60} 
                height={60}
                style={{borderRadius: "50%", 
                margin: "5px 20px 20px 20px"}}
                src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQilxmxWjjmZceX5Rf4CdFvsMD0oBtHoTgvLtEhAy63hg&s'/>
                <div style={{margin: "auto", height: "100%", color: "white", padding: 5}}>
                    <h3>{upcomingClasses[0].name} - {upcomingClasses[0].lecturer}</h3>
                    <h4>{upcomingClasses[0].location}: {upcomingClasses[0].start_time}- {upcomingClasses[0].end_time}</h4>
                    
                </div>
        </div>
        <Card style={{height: "80vh"}}>
            <div style={{
                height: "80%",
                width: "50%",
                position: "absolute",
                bottom: 20,
                left: 100,
                background: "#519bff",
                padding: 20,
                overflow: "hidden",
                borderRadius: 15
            }}>
                <Image 
                    width={690}
                    height={465}
                    src='https://images.unsplash.com/photo-1531482615713-2afd69097998?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjB8fHBlb3BsZSUyMGF0JTIwd29ya3xlbnwwfHwwfHx8MA%3D%3D'/>
                    
            </div>
            <div style={{
                background: "#519bff",
                width: "35%",
                marginLeft: "auto",
                height: "600px",
                padding: 20,
                borderRadius: "15px"
            }}>
                <Card style={{height: "100%", margin: "auto"}}>
                    <div style={{
                        position: "absolute",
                        left: -1,
                        background: "#519bff",
                        height: "12%",
                        width: "25%",
                        borderTopRightRadius: "15px",
                        borderBottomRightRadius: "15px",
                        padding: 20,
                        display: "flex",
                        justifyContent: "space-evenly",
                        
                    }}> 
                        <UserAddOutlined style={{fontSize: 30, color: "white"}}/>
                        <Title level={4} style={{fontSize: 25, color: "white", fontWeight: 500}}>{data[0].attended}</Title>
                    </div>

                    <div>
                        <Card style={{
                            margin: "20% 20% 0 20%",
                            height: "200px",
                            background: "#519bff",
                        }}>
                            <Image
                                width="190px"
                                height="150px"
                                src='https://images.unsplash.com/photo-1512361436605-a484bdb34b5f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8QkxBQ0slMjBnaXJsfGVufDB8MHwwfHx8MA%3D%3D'
                            />
                        </Card>
                        <Title level={2} style={{textAlign: "center"}}>{user[0].name}</Title>
                        <div style={{
                            width: "60%",
                            height: "50px",
                            background: "#519bff",
                            margin: "2px auto",
                            borderRadius: 15,
                            padding: 10,
                            color: "white"
                        }}>
                            <h3 style={{textAlign: "center"}}><strong>Reg No: </strong> {user[0].reg}</h3>
                        </div>
                        <div style={{
                            width: "60%",
                            height: "50px",
                            background: "#519bff",
                            margin: "2px auto",
                            borderRadius: 15,
                            padding: 10,
                            color: "white"
                        }}>
                            <h3 style={{textAlign: "left", marginLeft: "20px"}}><strong>Course: </strong> {user[0].course}</h3>
                        </div>
                        <div style={{
                            margin: 20,
                            height: "70px",
                            display: "flex",
                            justifyContent: "space-evenly"
                        }}>
                            <div style={{display: "flex", justifyContent: "space-evenly"}}>
                                <AuditOutlined style={{fontSize: "50px"}}/>
                                <Title level={5}>{user[0].status}</Title>
                            </div>

                            <div style={{display: "flex", justifyContent: "space-evenly"}}>
                                <BookOutlined style={{fontSize: "50px"}}/>
                                <Title level={5} >{user[0].year}</Title>
                            </div>

                            <div style={{display: "flex", justifyContent: "space-evenly"}}>
                                <UserOutlined style={{fontSize: "50px"}}/>
                                <Title level={5}>{user[0].role}</Title>
                            </div>
                        </div>
                    </div>
                </Card>
            </div>
        </Card>
    </>
  )
}

I am getting the errors
Property ‘div’ does not exist on type ‘JSX.IntrinsicElements’
‘Image’ cannot be used as a JSX component.
Its return type ‘ReactNode’ is not a valid JSX element.
Type ‘undefined’ is not assignable to type ‘Element | null’.
‘Card’ cannot be used as a JSX component.
‘UserOutlined’ cannot be used as a JSX component.
Its return type ‘ReactNode’ is not a valid JSX element.

I have tried npm install and checked my tsconfig.json file "moduleResolution": "Node", I also tried to run npm install typescript@latest -g but I still have the error. What coould be the issue?