Всем привет. Такое дело. Решил написать приложение погоды на React. Захотелось сделать его прямо-таки компонентным. Чтобы каждая функция, была отдельным файлом JSX. Столкнулся с такой проблемой: Написал функцию, которая принемает введённые пользователем данные в поле ввода, но вот вопрос. Запихал это дело в state через useState, Но вот вопрос, как мне теперь юзать то, что я получил в других функциях. Я импортирую функцию, но вот как быть дальше - хз. Потому как, как принять это самое состояние, не имею понятия. (Да, я понимаю, что можно заюзать пропсы, но вот КАК ИМЕННО их юзать в данной ситуации - не знаю.) Вот код функции.

import React from 'react';
import styled from 'styled-components';
import { useState } from 'react';

const Input = styled.input background: transparent; color: #fff; &focus { outline: none; };;

const Button = styled.button background: transparent; color: #fff; border: none;;

export default function GetCity(props) {
let [city, setCity] = useState('')

function getEvent(event) {
    setCity(event.target.value);
};
return (
<>

<Button onClick={() => props.onClick(city)}>Найти город

</>
)
}