How to import image in .tsx with react?

I have problem with image importing in typescript. Previously I used the img src="" but it says

View config getter callback for component img must be a function (received undefined). Make sure to start component names with a capital letter.

But the import is successful. It can find my file path. Then I use the Image component from react-native module. The code snippet is

<Image   style={{   width: 161,   height: 111,   alignSelf: "center",   marginBottom: 30, }} />

But there is an error in the source and it says

Type '{ source: any; style: { width: number; height: number; alignSelf: string; marginBottom: number; }; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<ImageProps, any, any>> & Readonly'.Property 'source' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<ImageProps, any, any>> & Readonly'.

How can I solve this? Thanks in advance.

Here is the full code

import { View, TouchableOpacity, Text , ScrollView } from "react-native";import React, { useState } from "react";import { SafeAreaView } from "react-native-safe-area-context";import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";import { svg } from "../svg";import { theme } from "../constants";import { components } from "../components";import { Image, SvgUri } from "react-native-svg";import  image from "../assets/logo2.png"const Unregistered: React.FC = ({ navigation }: any) => {    const [rememberMe, setRememberMe] = useState(false);    const renderHeader = () => {        return <components.Header goBack={true} />;    };    const renderContent = () => {        return (<ScrollView contentContainerStyle={{ flexGrow: 1 }}><View ><Text                        style={{                            textAlign: "center",                            ...theme.FONTS.H2,                            color: theme.COLORS.mainDark,                            marginBottom: 20,                        }}>                        Welcome to{"\n"}FNS Pay</Text><img src="image"></img><Image                        source={require("../assets/logo2.png")}                        style={{                            width: 161,                            height: 111,                            alignSelf: "center",                            marginBottom: 30,                        }}                    /><View                        style={{                            flexDirection: "column",                            alignItems: "center",                            justifyContent: "space-between",                            marginStart: 20,                            marginEnd: 20                        }}><components.Button                        title="Sign Up"                        onPress={() => navigation.navigate("TabNavigator")}                        containerStyle={{ marginTop: 400}}                    />                   <components.Button                        title="Register Device"                        onPress={() => navigation.navigate("OnBoarding")}                        containerStyle={{ marginTop: 20}}                    /></View></View></ScrollView>        );    };    return (<SafeAreaView            style={{ flex: 1, backgroundColor: theme.COLORS.bgColor }}>            {renderHeader()}            {renderContent()}</SafeAreaView>    );};export default Unregistered;    ```