how to loop through the union of two interface Props in React with Typescript

From the structure below working with React 16.9.0 and Typescript ^16.9.20":

file A.ts:export interface person{  id: number || null,  first_name: string,  date_of_birth: string,  some_unique_number: string,}file B.ts:export interface member{ group_name: string: first_name: string, pass_code: string, some_unique_number: string,}file C.tsx:# import file A# import file Binterface Props {  result: Array<person | member>; }let newResult: any[] = [];                       <=== I feel like `any[]` is wrong maybeif (result) {    newResult = results.map((result) => {      return (<div className="something" key={item.some_unique_number}>          {result.id}          {result.first_name}          {result.date_of_birth}          {result.group_name}          {result.pass_code}</div>      );    });  }

My current solution above is generating the error below:

Property 'id' does not exist on type 'person | member'.  Property 'id' does not exist on type 'member'.  TS2339    20 |         <div className="something" key={item.external_member_id}>> 21 |           {item.id}

Basically what i am trying to accomplish is loop through both interface and display the union of both A and B.

Thank you in advance.