I struggled with this for a couple of hours, but reading this typescript tutorial specifically on the subject really helped. My code snippet below, in case it helps anyone. Thanks

interface MyCardProps {
  name: string;
  age: number;
  city: string;
  profilepic: string;
}

function Mycard({ name, age, city, profilepic }: MyCardProps) {
  return (
    <div className="card">
      <h2>{name.split(" ")[0]}'s Card</h2>
      <img src={profilepic} className="logo react" alt="React logo" />
      <p>A few things about me</p>
      <ul>
        <li>My name is {name}</li>
        <li>I am {age} years old</li>
        <li>I live in {city}</li>
      </ul>
    </div>
  );
}