Typescript React Discriminated Unions problem

I'm trying to use Discriminated Unions on my React/Typescript project, but I've been getting some weird errors:

So, here is my types, the thing is, I want to use the annotation props only if the chart has the showAnnotationButton = true, because when I left it all on 1 type as optional props, in the code I got an error about the possibility of being undefined, and I'm trying to avoid having to expose each prop in the code like updateAnnotationsPUT as (id: number, data: Item) => Promise<void>

export type ChartProps = {
    ...
    /** Should show annotation button */
    showAnnotationButton?: false;
    ...
}
export type ChartWithAnnotationProps = {
    /** Should show annotation button */
    showAnnotationButton: true;
    /** Annotations array */
    annotations: AnnotationItem[];
    /** Chart Period (for Annotations) */
    chartPeriod: Date[];
    /** PUT call to update Annotation */
    updateAnnotationsPUT: (id: number | string, data: AnnotationItem) => Promise<void>;
    /** Date Options for the chart annotations */
    chartDateOptions: DateOptions;
} & ChartProps;

In my React element I have:

const element = (
        <>
            <SrOnly>
                <Link href={`#${skipChartAnchorId}`}>{i18n.skipChart}</Link>
            </SrOnly>
            <div className={scss.chartContainer}>
                <>
                    {showAnnotationButton && (
                        <Button
                            className={scss.showAnnotations}
                            onClick={() => setShowAnnotations(!showAnnotations)}
                        >
                            Show annotations
                        </Button>
                    )}
                    ...
                </>
                <HighchartsReact
                    containerProps={{
                        "data-component": "chart",
                        "data-observe-key": props["data-observe-key"],
                        className: className,
                        style: style,
                    }}
                    highcharts={Highcharts}
                    options={chartOptions}
                    ref={chartComponentRef}
                />
                {showAnnotationButton === true && (
                    <Annotations
                        showAnnotations={showAnnotations}
                        hideAnnotations={setShowAnnotations}
                        annotationsData={props.annotations}
                        onUpdateAnnotation={props.updateAnnotationsPUT}
                        chartPeriod={props.chartPeriod}
                        dateOptions={props.chartDateOptions}
                    />
                )}
            </div>
            ....
        </>
    );

Which shows the error on the showAnnotationButton === true condition:

This condition will always return 'false' since the types 'false | undefined' and 'true' have no overlap.

And errors like this on the props

Any ideas? I went through a lot of Discriminated Unions articles, but no idea on how to solve this issue

This condition will always return 'false' since the types 'false | undefined' and 'true' have no overlap.