TypeScript error "not assignable to type 'IntrinsicAttributes'" for React component with extended discriminated union - reactjs

Question

Problem:
I have an array of objects whose interfaces all extend a base interface.
I want to map these objects onto a React component which will route to specialised components for each of the supported child interfaces -- but first, I want to map over the array and extend each object with an onClick handler, whose signature is a generic which I want to specialise to suit whichever child interface it's being mapped onto.
I've come up with a solution that looks as though it should work, but I can't shake this TS error: Type 'AWithClick<T>' is not assignable to type 'IntrinsicAttributes. I see plenty of references in SO and elsewhere to TS errors related to that interface, but none quite seems to apply here.
I checked my solution against this helpful article, and I think the main difference in my implementation is that I'm trying to extend items from the union with specialised onClicks, rather than defining the specialised onClicks in the individual interfaces in the original union. The array of objects comes from a store, and I'm basically mapping its entities to component props, so I want to keep component props interfaces separate from the store interfaces.
Steps to repro:
npx create-react-app repro --template typescript
Replace App.tsx with the following:
import React from 'react';
enum AType { 'as', 'an' }
interface A {
type: AType;
}
interface AS extends A {
type: AType.as;
value: string;
}
interface AN extends A {
type: AType.an;
value: number;
}
type AnyA = AS | AN;
type AWithClick<T extends AnyA> = T & { onClick: (value: T['value']) => void }
const ASComponent = (props: AWithClick<AS>) => <button onClick={() => props.onClick(props.value)}>{props.value}</button>;
const ANComponent = (props: AWithClick<AN>) => <button onClick={() => props.onClick(props.value)}>{props.value}</button>;
const TestComponent = <T extends AnyA>(props: AWithClick<T>) => {
switch (props.type) {
case AType.as: return <ASComponent {...props} />;
case AType.an: return <ANComponent {...props} />;
}
};
const withoutClicks = [
{ type: AType.as, value: 'AS!' } as AS,
{ type: AType.an, value: 1 } as AN,
];
const withClicks = withoutClicks.map(<T extends AnyA>(props: T) => ({
...props,
onClick: (value: T['value']) => { console.log(value) },
}));
const TestComponentMain = () =>
<div>
{withClicks.map(props => <TestComponent {...props} key={props.type} />)}
</div>
export default TestComponentMain;
Now npm start and you'll see the error Type 'AWithClick<T>' is not assignable to type 'IntrinsicAttributes

Answer 1

It seems that typescript can't quite follow the logic to know that you are refining the type adequately.
But TestComponent here does not need to be generic. You can simply declare your argument as the superset of what you support, and then refine the type with conditionals.
This works:
const TestComponent = (props: AWithClick<AnyA>) => {
switch (props.type) {
case AType.as: return <ASComponent {...props} />;
case AType.an: return <ANComponent {...props} />;
}
};
Playground
In general, when troubleshooting error message with generics, it's always good ask the question "does this really need to be generic?"