Error with weather app

Hello, 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

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:16
search @ main.ac8fae7fe8a50ee8c7db.hot-update.js:59
callCallback @ bundle.js:12218
invokeGuardedCallbackDev @ bundle.js:12267
invokeGuardedCallback @ bundle.js:12327
invokeGuardedCallbackAndCatchFirstError @ bundle.js:12342
executeDispatch @ bundle.js:16577
processDispatchQueueItemsInOrder @ bundle.js:16609
processDispatchQueue @ bundle.js:16622
dispatchEventsForPlugins @ bundle.js:16633
(anonymous) @ bundle.js:16844
batchedEventUpdates$1 @ bundle.js:30529
batchedEventUpdates @ bundle.js:12016
dispatchEventForPluginEventSystem @ bundle.js:16843
attemptToDispatchEvent @ bundle.js:14326
dispatchEvent @ bundle.js:14244
unstable_runWithPriority @ bundle.js:159065
runWithPriority$1 @ bundle.js:19624
discreteUpdates$1 @ bundle.js:30546
discreteUpdates @ bundle.js:12028
dispatchDiscreteEvent @ 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);
                // setLat(weather.coord.lat);
                // setLon(weather.coord.lon);
                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;

you can check my article on How to Make Weather App in React