Typescript adds additional "or ( | ) " when I add : | undefined to interface in React Context

Question

I have an issue which I cannot figure or google-out. I declare such initial values of context.

export const LineSectionsContext = createContext<LineSectionsContextValues>({
    lineSectionsDefectsDetailsData: undefined,
    lineSectionsWarningsDetailsData: undefined,
});

This is how I define interface LineSectionsContextValues:

interface LineSectionsContextValues {
    lineSectionsDefectsDetailsData:LineSectionsDefectWarningDetailsType | undefined;
    lineSectionsWarningsDetailsData:LineSectionsDefectWarningDetailsTyp | undefined;
}

And here strange behaviour starts, when I hit ctrl+s interface syntax is automatically changed, it adds automatically typescript "or" syntax, which is | :

This is how type is defined:

export type LineSectionsDefectWarningDetailsType = {
    id: string;
    timestamp: Date;
    type: string;
    imageUrl: string;
    lineId: string;
    kilometer: number;
    coordinates: [];
    description: string;
};

When I add different type it works well. Can You please let me know how to fix it ? I got a feedback on code review that syntax of interface should be : lineSectionsDefectsDetailsData : LineSectionsDefectWarningDetailsType | undefined;