I have written a simple React code which displays a list of Film. Name, image, and "ocena" value, which should be editable. But it is in fact not editable. I know more or less know why. Because of the value={ocena} during creation of the element in list.

<input value ={ocena} type='number'  />

But I have no idea how to make it acually editable and dynamicly change the ocena value as user edits it. Is there a way ? Here is my code:

const Film = ({kk , nazwa, ocena,opis, setOcena,filmy}) => {
    console.log({kk})
    
    return(<div className="film">
        <img src={kk} width={'80px'} height={'80px'}  />
        <li className="film_item">{nazwa}</li>
        <textarea>{opis}</textarea>
        <input value ={ocena} type='number'/>
        <button className="delete">DELETE</button>
    </div>

    )
}

And the lsit itself

const Filmlist = ({filmy, setOcena , ocena}) => {
    const [kk , setkk] = useState(filmy.url1);
    
    return(
        
        <div className="filmlist_container">
            <ul className="filmlist">
            {console.log(filmy)}
                {filmy.map((film)=> (
                    
                    <Film setOcena={setOcena} nazwa ={film.nazwa} opis = {film.opis }
                    ocena= {film.ocena }kk= {film.url1 } filmy={filmy}/>
                ))};
                
            </ul>
        </div>
    )
                }

Is there a simple way, or should i rewrite my code for this thing to be possible?