Text strings must be rendered within a component

Question

I am new in React native and now I am stuck.

The error which I am getting is when I am passing a log to check if there are any internal errors in my applications but I don't know why I am getting this error as Text components has nothing to do with the log.

Here is the code:

import React from "react";
import { Text, View, Image, TouchableOpacity } from "react-native";
import Container from "../common/Container";
import Input from "../common/input";
import CustomButton from "../common/CustomButton";
import styles from "./styles";
import { LOGIN } from "../../constants/rountNames";
import { useNavigation } from "@react-navigation/native";


const RegisterComponents = ({ onChange, onSubmit, form, errors, loading, error }) => {

    const { navigate } = useNavigation();
    return (<Container>

        <Image height={70} width={70} style={styles.logoImage} source={require('../../assests/images/logo.png')} />

        <View>

            <Text style={styles.title}> Welcome to RNContact</Text>
            <Text style={styles.subTitle}> Create a free account</Text>

            <View style={styles.form}>
                {error?.error && <Text>{error.error}</Text>}
                <Input label="Username"
                    iconPosition="right"
                    placeholder="Enter Username"
                    onChangeText={(value) => {
                        onChange({ name: "userName", value })
                    }}
                    error={errors.userName}
                />

                <Input label="First name"
                    iconPosition="right"
                    placeholder="Enter First name"
                    onChangeText={(value) => {
                        onChange({ name: "firstName", value })
                    }}
                    error={errors.firstName}
                />

                <Input label="Last name"
                    iconPosition="right"
                    placeholder="Enter Last name"
                    onChangeText={(value) => {
                        onChange({ name: "lastName", value })
                    }}
                    error={errors.lastName}
                />

                <Input label="Email"
                    iconPosition="right"
                    placeholder="Enter Email"
                    onChangeText={(value) => {
                        onChange({ name: "email", value })
                    }}
                    error={errors.email}
                />

                <Input label="Password"
                    icon={<Text>SHOW</Text>}
                    secureTextEntry={true}
                    iconPosition="right"
                    placeholder="Enter Password"
                    onChangeText={(value) => {
                        onChange({ name: "password", value })
                    }}
                    error={errors.password}
                />

                **{console.log('error', error)};**
                <CustomButton
                    loading={loading}
                    onPress={onSubmit}
                    disabled={loading}
                    primary title="Submit" />

                <View style={styles.createSection}>
                    <Text style={styles.infoText}>Already have an account?</Text>
                    <TouchableOpacity
                        onPress={() => {
                            navigate(LOGIN);
                        }}>
                        <Text style={styles.linkBtn}>Login</Text>
                    </TouchableOpacity>
                </View>
            </View>
        </View>
    </Container>
    );
};

export default RegisterComponents;

So the code should work like this:

When I click on the submit button then if there are an internal or server related error it should show me in the log.

I checked all the tags and semicolons but they look fine. but still not able to figure out the cause of the error.