Разработайте функционал по редактированию блоков с погодой. Нужно менять блок с уже выведеным городом, на другой

мне нужно, менять город уже в готовом блоке через кнопку + input app.js

import { useState } from "react"
import Form from "./components/Form"
import Weather from "./components/weather"
import sun from './img/sun.svg'
import axios from "axios"

//import favorite from './img/favorite.jpg' <img src={favorite}/>

function App() {
        const [cities, setCities] = useState([])

        const getWeather = (city) => {
            if(city === '') return

            const API = '9522aa6664c6dcd18225b9cb39d2730c'
            const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API}&units=metric`
            
            axios.get(url)
                .then(res => {
                    setCities(cities => [{
                        name: city, 
                        temp: res.data.main.temp,
                        feels: res.data.main.feels_like
                    }, ...cities])
                })
                 .catch(err => console.log(err))
        }

        const deleteWeather = (city) => {
            const newCities = cities.filter(el => {
                return el.name !== city
            })
            setCities(newCities)
        }

        const edit = (city) => {

        }
         // const App = () => {}
        return (<div className='main'>
            <img alt="sun" src={sun} className="sun"/>
            <Form getWeather = {getWeather}/>
            <Weather cities={cities} deleteWeather={deleteWeather}/>
            
        </div>)
}

export default App;

weather.js

import City from './City'

function Weather(props){

    const data = props.cities.length === 0 ?
        (<p>There are no cities yet</p>) : ( <div>
            {props.cities.map(el => (
                <City deleteWeather={props.deleteWeather} key={el.name} city={el}/>
            ))}
       </div> )

    return (<div>
        <h2>All cities</h2>
        {data}
    </div>)
}

export default Weather;

city.js

import sun from '../img/only-sun.svg'
import clouds from '../img/clouds.svg'

function City(props){
    return <div className="city">
        <h3>{props.city.name}</h3>
        <p>Temperature: {props.city.temp}</p>
        <p>Feels like: {props.city.feels}</p>
        {props.city.temp >= 10 && <img alt='sun' src={sun}/>}
        {props.city.temp < 10 && <img alt='clouds' src={clouds}/>}
        <button onClick={() => props.deleteWeather(props.city.name)}>Delete</button><br/>
        <button onClick={() => props.edit(props.city.name)}>Change</button>
    </div>
}

export default City;

forms.js

import { useState } from "react";

 // className == class="", правильное описание скласса 
function Form(props) {
        const [city, setCity] = useState('');

        
        const getWeather = (city) =>{
            props.getWeather(city.trim())
            setCity('')
        }
        return (
            <div>
                <h1>Getting weather</h1>
                <form>
                    <input placeholder="Write the city" value ={city}             //каждый раз, когда записываеться значиние в input, это значение записываеться в setCity(состояние)
                            onChange={e => setCity(e.target.value)}/>   
                    <button type="button" onClick={ () => getWeather(city) }>Get</button>
                </form>
            </div>
        )
} 

export default Form;

В компоненте City под кнопкой удаления пропишите вывод нового компонента «Edit»; В компоненте Edit опишите кнопку и форму. При нажатии на кнопку меняйте значение состояния «isEdit» и в зависимости от него показываейте или скрывайте блок с формой; Через форму получайте одно значение и записывайте его внутрь состояния; При нажатии на кнопку в форме вызывайте метод из компонента «App.js»; Метод по редактированию в «App.js» должен принимать два значения: старое название города и новое. В методе обращайтесь к API, находите погоду по новому названию и далее заменяйте содержимое элемента из массива cities, где имя города будет равным переданному в метод старому имени города.