Estoy desarrollando un componente aislado en react js.

Tengo estas dos propiedades como entradas para este componente y estoy convirtiendo estos datos de entrada en arreglos regulares y los muestro en la interfaz de usuario. Prácticamente cualquiera de las propiedades será la entrada a este componente. Si data1 existe, me gustaría tomar data1 y procesarlo. De lo contrario, datos2. Pero a la vez no existirán dos entradas. eso es un requisito

 data1: MyObject<string, Type1>; data2: MyObject<string, Type2>;

La estructura Tipo1 se ve así

 { x: string; propA: 'a' | 'b' | 'c'; y: string; etc: ... }

La estructura tipo 2 se verá así

 { x: string; propB: 'a' | 'b' | 'c'; y: string; etc: ... }

Tengo un método en el que acepta ambos tipos como unión y necesito procesar los datos si mi entrada es de tipo 1, entonces tomaré la propiedad de tipo de objeto y la procesaré; de lo contrario, necesito tomar la propiedad de tipo 2 y procesarla.

 private convertBannerToMessage(message: Type1 | Type2): void { const msg = { ...message }; const msgType = msg.propA ?? msg.propB; switch (msgType) { case X: return this.processData(msg); case Y: return this.processData(msg); case Z: return this.processData(msg); default: return null; } }

Recibo un error al acceder a la propiedad propA o propB.

 Property 'propA' does not exist on type '{ id: string; propA: "a" | "b" | "c";