import * as React from "react"
import * as Reactdom from "react-dom"

interface Person {
  firstName: string;
  middleName?: string;
  lastName: string;
}

class Greeter extends React.Component<Person> {
  fullName: string
  constructor (props) {
    super(props)
    this.setFullName(props.person)
  }
  setFullName = function<Person>(person) {
    this.fullName = `${person.firstName}${person.lastName}`
  }
  sayName = ():string => this.fullName
  render () {
    return (
      <div>{this.sayName}</div>
    )
  }
}

const jor:Person = {
  firstName: "michale",
  lastName: "jordan",
}

Reactdom.render(<Greeter person={jor} />, document.getElementById("-sharpapp") as HTMLElement)

Why is this prompted?

[ts]
cannot assign type "{person: Person;}" to type "IntrinsicAttributes & IntrinsicClassAttributes < Greeter > & Readonly < {children?: ReactNode;} > & R.".
cannot assign type "{person: Person;}" to type "Readonly < Person >". The attribute "firstName" is missing in
type "{person: Person;}".

what does this mean