Couldn't work hooks for fetching API in Nexr JS + Open Weather API

Question

I would like to use the Open Weather API to get monthly temperature data for each City.

I am using Hooks to get temperature data but I am getting an Object error.

Wouldn't hooks work for this case? Or do you know the better way to get 12-month temperature data?

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.

hooks/useMonthlyData.tsx

import { OPEN_WEATHER_API_URL, OPEN_WEATHER_API_KEY } from '../config'

export const useMonthData = async(latitude: string, longitude: string, month: number) => {
  await fetch(`${OPEN_WEATHER_API_URL}/weather/?lat=${latitude}&lon=${longitude}&month=${month}&APPID=${OPEN_WEATHER_API_KEY}`)
  .then(res => res.json())
  .then(result => {
    const { average_min, average_max } = result
    const f_average_min = Math.floor(1.8*(Number(average_min)-273)+32)
    const f_average_max = Math.floor(1.8*(Number(average_max)-273)+32)
    return `${f_average_max}° / ${f_average_min}°`
  });
  return
}

src/App.tsx

import { useMonthlyTemperature } from 'src/hooks/useMonthlyTemperature'

...
return <div>{useMonthlyTemperature(destination.fields.latitude, destination.fields.longitude, 12)}</div>
...