He creado este componente TSX y me encuentro con un error.

 function FeedMain() { const posts = [ { id: "123", username: "danieljames", userImg: "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Instagram_logo_2016.svg/768px-Instagram_logo_2016.svg.png", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Instagram_logo_2016.svg/768px-Instagram_logo_2016.svg.png", caption: "This is AWWESOME", }, ]; return ( <> <div> {posts.map((post) => ( <> <FeedPost key={post.id} id={post.id}/> </> ))} </div> </> ); } export default FeedMain;

el error es:

Type '{ key: string; id: string; }' is not assignable to type 'IntrinsicAttributes'. Property 'id' does not exist on type 'IntrinsicAttributes'.

 FeedPost: function FeedPost({ key, id }) { return ( <> <h1 key={key}>{id}</h1> </> ); } export default FeedPost;

No estoy seguro de cómo cambiar la escritura para que TypeScript funcione con el método de mapeo. El error que ocurre es que al tipo '{}' le faltan las siguientes propiedades del tipo '{ clave: cualquiera; identificación: cualquiera; }': clave, identificación

Creo que necesito hacer que la escritura sea más específica, pero no estoy seguro de cómo hacerlo, ya que soy nuevo. ¡Cualquier sugerencia sería realmente bienvenida por favor!

¿Alguien tiene alguna sugerencia?