Issue with Typesense with error "network error"

I am using Reactjs and having an issue with syncing data from Firestore to Typesense. I am following this documentation and the whole process of what i've done is here: https://typesense.org/docs/guide/firebase-full-text-search.html#step-1-run-typesense

Additionally, the following are the configurations I've done for my project based on the link above.

• Set up a Cloud Firestore database in my Firebase project.

• Setup a Typesense server (Self-Hosted)

• Setup a Typesense Collection through the API.

• Querying the data using simple search parameters

• The Instantsearch Adapter adapter is already installed and configured

The issue: it won't render the data and is having this error: Typesense - Network error

Here's the code:

import "./App.css";
import { InstantSearch, SearchBox, Hits, Stats } from "react-instantsearch-dom";
import TypesenseInstantSearchAdapter from "typesense-instantsearch-adapter";
import Typesense from "typesense";

const client = new Typesense.Client({
  nodes: [
    {
      host: "13.54.222.245", //ip address of the typesense server i have setup on AWS Lightsail
      port: "8108",
      protocol: "http",
    },
  ],
  apiKey: "admin_apikey",
  connectionTimeoutSeconds: 2,
});

// creating a collection
const eventData = {
  name: "events",
  fields: [
    { name: "eventName", type: "string" },
    { name: "eventInfo", type: "string[]" },
  ],
};
client
  .collections()
  .create(eventData)
  .then(function (data) {
    console.log(data);
  });

// query the data using search parameters
const search = {
  q: "events",
  query_by: "eventName",
};

client
  .collections("eventData")
  .documents()
  .search(search)
  .then(function (searchResults) {
    console.log(searchResults);
  });

// search interface for the client side
const typesenseInstantsearchAdapter = new TypesenseInstantSearchAdapter({
  server: {
    apiKey: "admin_apikey",
    nodes: [
      {
        host: "127.0.0.1",
        port: "8108",
        protocol: "https",
      },
    ],
  },
  additionalSearchParameters: {
    queryBy: "eventName, eventInfo",
  },
});
const searchClient = typesenseInstantsearchAdapter.searchClient;

function SearchInterface() {
  const Hit = ({ hit }) => (
    <section class="main">
      <div class="card-container">
        <div class="card-header">
          <h4>{hit.eventName}</h4>
          <p>{hit.eventInfo}</p>
        </div>
        <hr />
      </div>
    </section>
  );

  return (
    <InstantSearch searchClient={searchClient} indexName="eventData">
      <SearchBox />
      <Stats />
      <Hits hitComponent={Hit} />
    </InstantSearch>
  );
}
export default SearchInterface;

It looks like you've configured nodes when instantiating TypesenseInstantSearchAdapter to talk to

host: "127.0.0.1",
port: "8108",
protocol: "https"

But based on the config you're using above that, your self-hosted server is running at:

host: "13.54.222.245",
port: "8108",
protocol: "http"

The error you're seeing most likely is because there is no Typesense server running at 127.0.0.1:8108 with https turned on.