I have created this TSX component and am running into an 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;

The error is:

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;

I am unsure how to change the typing so typescript works with the mapping method. The error that occurs is that Type '{}' is missing the following properties from type '{ key: any; id: any; }': key, id

I think I need to make the typing more specific but I am just unsure how to go about this as I am new. Any suggestions would be really welcomed please!

Does anyone have any suggestions!