Bug Report

This is a sample code for have a clean issue.

import React from 'react';
class A {
	Renderer = RendererA;
}
class B {
	Renderer = RendererB;
}

const RendererA = () => {
	return <div> A </div>;
};

const RendererB = () => {
	return <div> B </div>;
};

const TestRendererTypes = () => {
	const AB: A | B = null; // just for the demo, AB can be A or B !

	AB.Renderer; //🟩 okey cool,ts find all refs !
	const LostRef = <AB.Renderer />; //🟥 not cool ,ts seem remove refs !
	return LostRef;
};

playground

---

🙁 Actual behavior

Ts decode only one reference to a function jsx when using inside tag </> It should show both Renderer ref here !

🙂 Expected behavior

We should get all refs like that's . (working if use only a variable ref without a jsx tag <></> )

---

The example is basic, but inside my project i losing all refs, and this is a issu if i need fast track where a rendering is pointing ! And also will give incorrect props Intelisence ! Example here is missing all my others plugins ! But if i add a direct ref like that's , i can get all refs, but is polluting my code

It seem that's TS have some difficulty to understand JSX !
Is there a hacky and (clean way) to fix this ? or tell me if you guys have temp solutions ? I hope i exposed correctly my issue !

thanks @+

---

TSC: Version 4.2.3 Version : 1.55.0 (user setup) Commit : c185983a683d14c396952dd432459097bc7f757f Date : 2021-03-30T16:01:55.261Z Electron : 11.3.0 Chrome : 87.0.4280.141 Node.js : 12.18.3 V8 : 8.7.220.31-electron.0 OS : Windows_NT x64 10.0.19042

---