Error: Objects are not valid as a React child (found: [object Promise])

I am trying to store the information that I receive in start to a variable called t and it is not giving me the information.

export const LoginScreen = async() => {
  const [formValues, handleInputChange] = useForm({
    email: '',
    password: ''
  });

  const start = async function () {
    const resp = await fetch('http://localhost:3003/login', {
      method: 'POST',
      body: JSON.stringify({
        'email': formValues.email,
        'password': formValues.password
      }),
      headers: {
        'Content-Type': 'application/json'
      }
    });
  
    const data = await resp.json();
  
    return data;
  }

  const t = await start();

  console.log(t)

  const handleSubmit = (e) => {
    e.preventDefault();
}
```

Answer

Just remove async in component delaration and try again:

export const LoginScreen = () => {
  const [res, setRes] = useState()
  const [formValues, handleInputChange] = useForm({
    email: '',
    password: ''
  });

  const start = async function () {
    const resp = await fetch('http://localhost:3003/login', {
      method: 'POST',
      body: JSON.stringify({
        'email': formValues.email,
        'password': formValues.password
      }),
      headers: {
        'Content-Type': 'application/json'
      }
    });
  
    const data = await resp.json();
  
    return data;
  }

  start().then((res)=>{
    console.log(res);
    setRes(res);
  });

  const handleSubmit = (e) => {
    e.preventDefault();
}