Soy nuevo en React.js. Estoy tratando de agregar una funcionalidad adicional para eliminar el registro de la lista al establecer el valor.

aquí está mi App.js

 import React, { useState } from "react";
import data from "./data";
import List from "./List";

function App() {
 const [movies, setMovie] = useState(data);

 return (
 <main>
 <section className='container'>
 <h3>{movies.length} Movies to Watch</h3>
 <List movies={movies} setMovie />
 <button onClick={() => setMovie([])}>clear all</button>
 </section>
 </main>
 );
}

export default App;

En List.js, intento eliminar el registro al hacer clic en el botón Observado. ¿Puedo llamar a setMovie dentro del componente List? es una forma correcta?

lista.js

 import React from "react";

const List = ({ movies }, setMovie) => {
 return (
 <>
 {movies.map((movie) => {
 const { id, name, year, image } = movie;
 return (
 <article key={id} className='person'>
 <img src={image} alt={name} />
 <div>
 <h4>{name}</h4>
 <button
 className='btn'
 onClick={(id) =>
 setMovie(movies.filter((movie) => movie.id !== id))
 }
 >
 watched
 </button>
 <p>{year}</p>
 </div>
 </article>
 );
 })}
 </>
 );
};

export default List;