api not fetching from the first run

Question

I making a weather app, I want to display 7-days forecast but it is returning an error and I couldn’t figure how to solve it

and the api is not fetching until I search for the city again, then it fetches and logges to the console

This is the error message:

Uncaught TypeError: Cannot read properties of undefined (reading 'lat')at search (main.ac8fae7fe8a50ee8c7db.hot-update.js:59:150)at HTMLUnknownElement.callCallback (bundle.js:12218:18)at Object.invokeGuardedCallbackDev (bundle.js:12267:20)at invokeGuardedCallback (bundle.js:12327:35)at invokeGuardedCallbackAndCatchFirstError (bundle.js:12342:29)at executeDispatch (bundle.js:16577:7)at processDispatchQueueItemsInOrder (bundle.js:16609:11)at processDispatchQueue (bundle.js:16622:9)at dispatchEventsForPlugins (bundle.js:16633:7)at bundle.js:16844:16search @ main.ac8fae7fe8a50ee8c7db.hot-update.js:59callCallback @ bundle.js:12218invokeGuardedCallbackDev @ bundle.js:12267invokeGuardedCallback @ bundle.js:12327invokeGuardedCallbackAndCatchFirstError @ bundle.js:12342executeDispatch @ bundle.js:16577processDispatchQueueItemsInOrder @ bundle.js:16609processDispatchQueue @ bundle.js:16622dispatchEventsForPlugins @ bundle.js:16633(anonymous) @ bundle.js:16844batchedEventUpdates$1 @ bundle.js:30529batchedEventUpdates @ bundle.js:12016dispatchEventForPluginEventSystem @ bundle.js:16843attemptToDispatchEvent @ bundle.js:14326dispatchEvent @ bundle.js:14244unstable_runWithPriority @ bundle.js:159065runWithPriority$1 @ bundle.js:19624discreteUpdates$1 @ bundle.js:30546discreteUpdates @ bundle.js:12028dispatchDiscreteEvent @ bundle.js:14210

Uncaught TypeError: Cannot read properties of undefined (reading 'lat')at search (main.ac8fae7fe8a50ee8c7db.hot-update.js:59:150)at HTMLUnknownElement.callCallback (bundle.js:12218:18)at Object.invokeGuardedCallbackDev (bundle.js:12267:20)at invokeGuardedCallback (bundle.js:12327:35)at invokeGuardedCallbackAndCatchFirstError (bundle.js:12342:29)at executeDispatch (bundle.js:16577:7)at processDispatchQueueItemsInOrder (bundle.js:16609:11)at processDispatchQueue (bundle.js:16622:9)at dispatchEventsForPlugins (bundle.js:16633:7)at bundle.js:16844:16

App.js:

import './App.css';
import {openweatherApi} from './openweatherApi';
import React, {useState} from 'react';
import { Header } from './components/Header/Header';
import { Main } from './components/Main/Main';
import { Fail } from './components/Fail/Fail';
import { Land } from './components/Land/Land';
// import { FiveDays } from './components/FiveDays/FiveDays';
const App = () => {
    const [query, setQuery] = useState("");
    const [weather, setWeather] = useState("");
    const [dailyForecast, setDailyForecast] = useState("");
    const search = event =>{
        if(event.key === 'Enter'){
            fetch(`${openweatherApi.URL}weather?q=${query}&appid=${openweatherApi.API_KEY}`)
            .then( (result) => {
                if(result.ok){
                    return result.json();
                }else{
                    console.log('invalid city');
                }
            })
            .then(json => {
                setWeather(json);
                console.log(json);
            })
            .then(
                
                // https://api.openweathermap.org/data/2.5/onecall?lat={lat}&lon={lon}&exclude={part}&appid={API key}
                fetch(`${openweatherApi.URL}onecall?lat=${weather !== undefined || weather !== "" ? weather.coord.lat : null}&lon=${weather !== undefined || weather !== "" ? weather.coord.lon : null}&exclude=current,minutely,hourly,alerts&appid=${openweatherApi.API_KEY}`)
                .then( (res) =>{
                    if(res.ok){
                        return res.json();
                    }else{
                        return 'Ok Doo';
                    }
                })
                .then(json =>{
                    setDailyForecast(json);
                    console.log(json);
                })
            )        
        }
    }
    const handleFail = () =>{
        if(weather === undefined){
            return <Fail />
        }else if(weather === ""){
            return <Land />
        }
        else{
            return <Main 
            weather={weather}
            dailyForecast={dailyForecast} />
        }
    }
    let date = new Date();
    let hours = date.getHours();
    // console.log(date.getDay());
    return (
        <div className={ hours > 7 && hours < 18 ? 'morning' : 'morning'} >
            <div className="App">
                <div className='content'>
                    <Header 
                        search={search}
                        setQuery={setQuery}
                        weather={weather}
                        />
                    {/*Rendering fail or main */}
                    {handleFail()}
                    <div className='footer'>A project by Khaled Nadam</div>
                </div>
            </div>
        </div>
    );
}

export default App;

I tried to assign it to null if weather === undefined with a ternary if but it did not work