How to optimized an initialization of mutation in mapping

How to optimize this kind of code that every movie has its own initialization of mutation.
I know I should put the initialization of mutation on the top of the file of MoviesPage, but that’s not the only page I have movies and I have a lot of mutation like, add to watch list and something else.

export default async function MoviesPage() {
  const movies = await getMovies() // 100 movies
  return (
    <div>
      {movies.map(movie => (
        <Movie key={movie.id} movie={movie} />
      ))}
    </div>
  )
}

// Movie Component
import { useMutation } from '@tanstack/react-query'


function Movie(movie: TMovie) {
  const { mutate } = useMutation({mutationFn:()=> ...})

  return (
    <div onClick={() => mutate(movie)}>
      <image src={movie.posterPath} />
    </div>
  )
}