Problem connecting chatbot to react app

Hello you all, I am not quite sure if this is the right place to post this, but I am trying to connect my chatbot to a react application using the rasa webchat react widget. Everything runs perfectly until I try to set a state using setState.

import React, { useEffect, useState } from 'react';
import { Map, Polygon, TileLayer } from 'react-leaflet';
import { Widget } from 'rasa-webchat';

import "./app.css";
import api from './services/api';

function App() {
  const [region, setRegion] = useState();

  useEffect(() => {
    ( async () => { 
      //const response = await api.get('/api/initial-acceptance-region');
      //const data = JSON.parse(;
      setRegion(0); // Problematic function call
  }, [])

  return (
      <Map center={[-7.2281, -35.8739]} zoom={14}>
          attribution="&copy; <a href=&quot;;>OpenStreetMap</a> contributors"
        customData={{"language": "pt"}} // arbitrary custom data. Stay minimal as this will be added to the socket
        subtitle={"Descreva um lugar"}
        inputTextFieldHint={"Digite uma mensagem..."}
          "connect": () => localStorage.clear(),
          "disconnect": () => localStorage.clear()
export default App;

If the line setRegion(0) (0 is just a test argument, any other value produces the same effect) is commented out, everything works fine, but as soon as I include the function call, the widget disappears. I am a beginner in react, so I might have made some mistake.

Also, the following messages show up in firefox console

The development server has disconnected.
Refresh the page if necessary.

transport close
transport close

OS - Ubuntu

Browser - Firefox 74.0

Python version - 3.7.5

Rasa Version - 1.8.1

rasa-webchat - “^0.7.21”

react - “^16.13.0”

Sorry for the troubles and thanks in advance!

It seems that this might be an issue with the connection. I added


and the widget now shows up.