javascript-如何将值从输入传递到提交按钮？

我目前正在开展一个项目来实施一个网站来检查天气预报。

我正在尝试从输入字段中获取值，当我单击提交按钮时，该值应设置为cityName. 为了使这项工作，我必须改变什么？

import { useState, useEffect } from "react"


export function WeatherInfo() {

    const token: string = '7ebe7c2a03cd48c090a193437'

    async function getCurrentWeather(cityName: string): Promise<any> {
        const response = await fetch(`http://api.weatherapi.com/v1/current.json?key=${token}&q=${cityName}`)
        const data = await response.json()
        console.log(data)
        return data
    }

    const [cityName, setCityName]: any = useState('')
    const [cityWeather, setCityWeather] = useState({})
    const [value, setValue] = useState('')

    const handleChange = (event: any) => {
        setValue(event.target.value)
    }

    const handleSubmit = (event: any) => {
        event.preventDefault()
        setCityName(value)
    }

    useEffect(() => {
        async function fetchData() {
            const cityWeather = await getCurrentWeather(cityName)

        }
        fetchData()
    })


    return (
        <div >
            <form onSubmit={handleSubmit}>
                <input onChange={handleChange} placeholder="Type here" />
                <button>Search</button>
            </form>

        </div>
    );

}