Here's what I'm trying to do: I call a mongoDB distinct query using axios.get in order to find various provinces people are in, then put as options for a select menu, to allow a user to search for a person based on province.

But when I try to use this, the website crashes and gives me the error "Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead."

Another error it gives is that "type.map" is not a function. Possibly related to the above error?

How do I fix this?

import * as React from "react";
import axios from "axios";
 
export default async function Locations() {

  let options = null;

  async function axiosTest() {
    // This is a server link i created that runs a query that returns distinct provinces from the database
    axios.get("/api/v2/people/provinces").then(data => console.log(data));
    return await axios.get("/api/v2/people/provinces");
    // The console.log() above displays all the objects that are in the query given by the server link in an array
    // e.g. ['British Columbia', 'Alberta', 'Saskatchewan', etc.]
  }
  
  var type = await axiosTest();

  if (type) {
    options = type.map((el) => <option key={el}>{el}</option>);
  }

  return (
    <div
      style={{
        padding: "16px",
        margin: "16px",
      }}
    >
      <form>
        <div>
          <select>
            {
              options
            }
          </select>
        </div>
      </form>
    </div>
  );
};