Missing definition from union type when triggered from JSX tag name

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

Start with the provided TSX reproduction and its linked TypeScript Playground, comparing reference resolution for AB.Renderer with <AB.Renderer />. Trace the JSX tag-name resolution path; done when both RendererA and RendererB references are reported for the union and JSX props/intellisense include both.