Import async vanilla js function into react component [duplicate]

I created a function that retun a city using public Ip address. Inside that function I get result but unable to get result into another react component.

getCity.js

const { publicIpv4 } = require("public-ip");
export async function currentCity() {
  let ip = "";
  let city = "";
  // Get IP
  try {
    ip = await publicIpv4();
  } catch (err) {
    console.log(err);
  }

  // Get City From Ip and save
  fetch(`https://ipapi.co/${ip}/json/`)
    .then(function (response) {
      response.json().then((jsonData) => {
        // console.log(jsonData.city);
        city = jsonData.city;
        // console.log(`city: ${city}`);
      });
    })
    .catch(function (error) {
      console.log(error);
    });

  return city;
}

WeatherCard.js

import React, { useState } from "react";
import { currentCity } from "./getCity";

const WeatherCard = () => {
  const [city, setCity] = useState("");

  setCity(currentCity());
  console.log(city);

  return <div></div>;
};

export default WeatherCard;