TypeScript DeepMap Union type with if statement

I'm trying to create a Union type with the structure of optional fields. I have created the following types:

export type StartEndType = {
  start_date: string;
  end_date: string;
};

export type PayrollContract = StartEndType & {
  type: 'ON_PAYROLL';
  yearly_holidays: number;
};

export type FreelanceContract = StartEndType & {
  type: 'FREELANCE';
  hourly_rate: number;
};

export type Contract = PayrollContract | FreelanceContract;

In my component it looks like:

{contractType === 'ON_PAYROLL' ? (
  <Number name="yearly_holidays"  />
) : contractType === 'FREELANCE' && (
  <Number name="hourly_rate" />
)}

When I hover contract, it knows that it's one of ON_PAYROLL or FREELANCE. Although unfortunately I get a DeepMap error within my component.

Isn't thist supported by TypeScript out of the box?

Property 'yearly_holidays' does not exist on type 'DeepMap<PayrollContract, FieldError> | DeepMap<FreelanceContract, FieldError>'.
  Property 'yearly_holidays' does not exist on type 'DeepMap<FreelanceContract, FieldError>'.

How can I solve this? Thanks in advance.