OpenWeatherMap API fetching in React JS

I am trying to create a weather app using react. While fetching the data from the API, there is an issue that it always return null from the API even after the asynchronous call.

import React, {useEffect, useState } from "react";

 export default function App(){

const API_KEY = "somekey";

 const [lat, setLat] = useState([]);

 const [long, setLong] = useState([]);

 const [data, setData] = useState([]);

 useEffect(() => {

   const fetchData = async () => {

     navigator.geolocation.getCurrentPosition(function (position) {

       setLat(position.coords.latitude);

       setLong(position.coords.longitude);

     });

     await fetch(

       `https://api.openweathermap.org/data/2.5/onecall?lat=${lat}&lon=${long}&exclude=hourly,minutely&units=metric&appid=${API_KEY}`

     )

       .then((res) => res.json())

       .then((result) => {

         setData(result);

         console.log(result);

       });

   };

   fetchData();

 }, [lat, long]);

  return (

    <div className="App">

      {(data.main && data.sys && data.weather) ? (

        <h1>{data.name}</h1>

      ) :null}

    </div>

  );

}

It always executes the second statement in the conditional operator. How do I return the data temperature ,humidity, sunrise etc.?

First, you should split getting lat and long from fetching data.
Second, lat and long are probably not arrays.

Could you please explain with code since I have used setLat and setLong sepearately and I am new to react. I have tried to put setLat as setLat([position.coords.latitude]) as an array with no result. The app is still returning null

Like this: determined-tesla-6ksir1 - CodeSandbox
Also onecall has different response structure.