Como buscar dados de uma lista de formulários

Estou fazendo um teste para um emprego, o teste consiste em buscar os filmes mais populares atráves de uma api do TheMovieDB e listar esses filmes. Em cada filme deve ter um botão de favoritar e ao clicar deve ser gravado os dados desse filme no banco de dados. Consegui buscar e listar os filmes, mas não estou conseguindo pegar os dados do filme ao clicar em favoritar. Minha ideia foi criar um formulário para cada filme listado (cada um contém Title e Overview). Ao clicar no botão favorito específico (que é do tipo submit), quero pegar esses dados. Iniciei um estado de cada variável (title e overview) como vazio, mas ao clicar no submit, elas continuam vazias, não adquirem os valores que busquei da api.

import React, { useState, useEffect } from ‘react’

import api from ‘…/…/services/api’

import ‘./styles.css’

function Main() {

const [movies, setMovies] = useState([])

const [title, setTitle] = useState('')

const [overview, setOverview] = useState('')

function handleFavorites(e) {

    e.preventDefault()

    console.log(title)

    console.log(overview)

}

useEffect(() => {

    api.get('').then(response => {

        setMovies(response.data.results)

    })

})

return (

    <div className="movie-list">

        {movies.map(movie => (

            <form onSubmit={handleFavorites} key={movie.id}>

                <article >

                    <strong>{movie.title}</strong>

                    <input type="hidden" value={title} onSubmit={(e) => e.target.value = movie.title} onChange={(e) => { setTitle(e.target.value) }} />

                    <p>{movie.overview}</p>

                    <input type="hidden" value={overview} onSubmit={(e) => e.target.value = movie.overview} onChange={(e) => { setOverview(e.target.value) }} />

                    <button type="submit">Favoritar</button>

                </article>

            </form>

        ))}

    </div>

)

}

export default Main