I'm trying to get JSON data to show up in the console log but for some reason it's not working. How do I store the JSON data in a variable and print to console?

    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);
            });
        
            console.log("Latitude is:", lat)
            console.log("Longitude is:", long)
        
        await fetch(`${process.env.REACT_APP_API_URL}?location=${lat},${long}&timesteps=1d&units=imperial&apikey=${process.env.REACT_APP_API_KEY}&fields=treeIndex,weedIndex,grassIndex`)
         .then(res => res.json())
         .then(res => {
            setData(res);
            console.log(res);
        }); 
        }
    fetchData();
    
    }, [lat, long]);