So im trying to export the two variables locationLat and locationLon for use in another component (that isnt the main App component) and also want to export the Header function component to the App component. What would be the easiest way to do this?

import React, { useState } from 'react';
import axios from 'axios'; 

export let locationLat; 
export let locationLon;

function Header() {

    const [text, setText] = useState("");

    function handleChange(event) {
        setText(event.target.value);
    }

    function handleClick() {
        const geoCoderURL = "http://api.openweathermap.org/geo/1.0/direct?q=" + text + "&limit=5&appid={apikey}"
        function getCoordinates(url) {
            axios.get(url).then((response) => {
                locationLat = response.data[0].lat;
                locationLon = response.data[0].lon;
                // return locationLat, locationLon;
            });
        } 
        getCoordinates(geoCoderURL);        
    }

    return (
        <div>
            <h1>Five Day Forecast</h1> 
            <input onChange={handleChange} type="text" name="name" autoFocus placeholder="Enter location here."/>
            <button type="submit" onClick={handleClick}>Forecast</button> 
        </div>
    )
}

export default Header;