Axios Post request in React Native

Question

I am new to react native and trying to post a request to an api, but I am having different results and I am not able to understand why this is happening what I am missing.

Below is the code and after that a short description is given about the code.

import { Button, TextInput } from "react-native";
import axios from "axios";
const SignUp = (props: any) => {
const { navigation } = props;
const [data, setData] = React.useState({
    name: "",
    checkName: false,
});

const handleNameChange = (val: any) => {
    if (val.length !== 0) {
        setData({
            name: val,
            checkName: true,
        });
    } else {
        setData({
            name: val,
            checkName: false,
        });
    }
};
const toSend = {
    name: data.name,
};
async function handleSubmit() {
    console.log("Component Did Mount");
    let axiosConfig = {
        headers: {
            "Content-Type": "application/x-www-form-urlencoded",
        },
    };

    axios
        .post(
            "https://cloud-api.herokuapp.com/api/users/signup",
            toSend,
            axiosConfig
        )
        .then((response) => {
            console.log(response);
        })
        .catch((error) => {
            console.log(error);
        });
}
<TextInput
    placeholder="Name"
    onChange={(val: any) => handleNameChange(val)}
/>;
return <Button title="signUp" onPress={handleSubmit}></Button>;
};

export default SignUp;

I am not able to demystify this error:

If I a add concrete value to the name state like this { name: "Carla" } and do not enter any value in the text field on front end and press the button, then my request is successfully posted without warning [1] and error[2].

But when I try to use front end to enter value in text box and then sent it on a button click then this warning [1] prompts on browser console and after some time the server respond back with [2].

[1]

index.js:1 Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the method isDefaultPrevented on a released/nullified synthetic event. This is a no-op function. If you must keep the original synthetic event around, use event.persist(). See react-event-pooling for more information.

[2]

Access to XMLHttpRequest at 'https://cloud-api.herokuapp.com/api/users/signup' from origin 'http://localhost:19006' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. SignUp.tsx:121 Error: Network Error at createError (createError.js:16) at XMLHttpRequest.handleError (xhr.js:83) xhr.js:178 POST https://cloud-api.herokuapp.com/api/users/signup net::ERR_FAILED