I am having issues with Twilio Sync and ReactJS and page is not updating while I send SMS

Question

I am setting app a chatbot with Twilio and ReactJS, barista order bot, I am not able to display my messages real time on browser. I create a React app so I can display every time I send a SMS then it will also display on browser.

I went to Twilio console and tried to see if maybe I need to modify my function where the sync occurs.

This is the token function created.

exports.handler = function(context, event, callback) {
  const ACCOUNT_SID = context.ACCOUNT_SID;

  const SERVICE_SID = context.SYNC_SERVICE_SID;
  const API_KEY = context.API_KEY;
  const API_SECRET = context.API_SECRET;

  const IDENTITY = 'barista';

  const AccessToken = Twilio.jwt.AccessToken;
  const SyncGrant = AccessToken.SyncGrant;

  const syncGrant = new SyncGrant({
    serviceSid: SERVICE_SID
  });

  const accessToken = new AccessToken(ACCOUNT_SID, API_KEY, API_SECRET);

  accessToken.addGrant(syncGrant);
  accessToken.identity = IDENTITY;

  const response = new Twilio.Response();

  const headers = {
    'Content-Type': 'application/json',
    'Access-Control-Allow-Origin': 'http://localhost:3000',
    'Access-Control-Allow-Methods': 'GET',
    'Access-Control-Allow-Headers': 'Content-Type'
  };

  response.setBody({ token: accessToken.toJwt() });
  response.setHeaders(headers);

  callback(null, response);
};

I get these two errors on my browser

Access to fetch at 'https://goldenrod-labradoodle-4220.twil.io/barista-token' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

orders.js:26 GET https://goldenrod-labradoodle-4220.twil.io/barista-token net::ERR_FAILED

Any help, greatly appreciated.