Async function not waiting for results even when used inside useEffect with await

Question

I have the following code within a component where I am using a cookie value to decide which component or div block to show.

This works eventually as expected. But there is a short while where it seems like the cookie value is not checked yet.

During this period, I keep entering the else block first. After a couple of seconds, I enter the if block correctly.

But why? That Cookies.get is an async call. But I am calling it inside useEffect and using await.

Could I please know how I could modify this so that if the cookie is existing, I will never enter the else block?

import React from 'react';
import Cookies from 'js-cookie';

const Sample = () => {
  const [cookie, setCookie] = React.useState(false);
  const hasCookie = async () => !!Cookies.get('my-cookie');

  React.useEffect(() => {
    const myCookie = async () => await hasCookie();
    myCookie().then((result) => setCookie(result));
  }, []);

  const component = () => {
    if (cookie) {
      console.log(`YES there is a cookie: ${cookie}`);
      return <div>
        Yup the cookie exists
      </div>;
    } else {
      console.log(`NO no cookie: ${cookie}`);
      return <div>
        Nope no cookie
      </div>;
    }
  };

  return component();
};

export default Sample;

For reference the following is the console log where it prints false for while before turning to true.

Sample.jsx:20 NO no cookie: false
Sample.jsx:20 NO no cookie: false
Sample.jsx:20 NO no cookie: false
Sample.jsx:20 NO no cookie: false
Sample.jsx:20 NO no cookie: false
Sample.jsx:20 NO no cookie: false
Sample.jsx:20 NO no cookie: false
Sample.jsx:20 NO no cookie: false
Sample.jsx:20 NO no cookie: false
Sample.jsx:15 YES there is a cookie: true
Sample.jsx:15 YES there is a cookie: true
Sample.jsx:15 YES there is a cookie: true
....