io-ts recursion use issue

Question

I trying to use t.recursion of io-ts library to document a type, that has recursion.

The type in documentation looks like this:

export interface BoxBase {
  id?: string;
  mode: DockMode;
  size?: number;
  children: (BoxBase | PanelBase)[];
}

I wrote this:

const PanelBaseV = t.intersection([
    t.type({
        tabs: t.array(TabBaseV),
    }),
    t.partial({
          // ...
    })
])

interface BoxBaseV {
    mode: t.TypeOf<typeof DockModeV>,
    children: Array<BoxBaseV | t.TypeOf<typeof PanelBaseV>>,
    id?: Id,
    size?: number,
}

const BoxBaseV: t.Type<BoxBaseV> = t.recursion('BoxBaseV', (self) =>
    t.intersection([
        t.type({
            mode: DockModeV,
            children: t.array(
                t.union([ self, PanelBaseV ])
            ),
        }),
        t.partial({
            id: IdV,
            size: t.number,
        })
    ])
)

Then I get an error in IDE:

Type 'LayoutBase' is not assignable to type '{ dockbox: BoxBaseV; } & { floatbox?: BoxBaseV | undefined; windowbox?: BoxBaseV | undefined; maxbox?: BoxBaseV | undefined; }'.
   Type 'LayoutBase' is not assignable to type '{ dockbox: BoxBaseV; }'.
     The types of 'dockbox.children' are incompatible between these types.
       Type '(BoxBase | PanelBase)[]' is not assignable to type '(BoxBaseV | ({ tabs: { id: string; }[]; } & { id?: string | undefined; size?: number | undefined; oldSize?: number | undefined; activeId?: string | undefined; alwaysOnTop?: boolean | undefined; ... 4 more ...; h?: number | undefined; }))[]'.
         Type 'BoxBase | PanelBase' is not assignable to type 'BoxBaseV | ({ tabs: { id: string; }[]; } & { id?: string | undefined; size?: number | undefined; oldSize?: number | undefined; activeId?: string | undefined; alwaysOnTop?: boolean | undefined; ... 4 more ...; h?: number | undefined; })'.
           Type 'BoxBase' is not assignable to type 'BoxBaseV | ({ tabs: { id: string; }[]; } & { id?: string | undefined; size?: number | undefined; oldSize?: number | undefined; activeId?: string | undefined; alwaysOnTop?: boolean | undefined; ... 4 more ...; h?: number | undefined; })'.
             Type 'BoxBase' is not assignable to type 'BoxBaseV'.
               Types of property 'children' are incompatible.                 Type '(BoxBase | PanelBase)[]' is not assignable to type '(BoxBaseV | ({ tabs: { id: string; }[]; } & { id?: string | undefined; size?: number | undefined; oldSize?: number | undefined; activeId?: string | undefined; alwaysOnTop?: boolean | undefined; ... 4 more ...; h?: number | undefined; }))[]'.
                   Type 'BoxBase | PanelBase' is not assignable to type 'BoxBaseV | ({ tabs: { id: string; }[]; } & { id?: string | undefined; size?: number | undefined; oldSize?: number | undefined; activeId?: string | undefined; alwaysOnTop?: boolean | undefined; ... 4 more ...; h?: number | undefined; })'.
                     Type 'BoxBase' is not assignable to type 'BoxBaseV | ({ tabs: { id: string; }[]; } & { id?: string | undefined; size?: number | undefined; oldSize?: number | undefined; activeId?: string | undefined; alwaysOnTop?: boolean | undefined; ... 4 more ...; h?: number | undefined; })'.

Cannot understand, why 'BoxBase' is not assinable to type 'BoxBase | ({ tabs: { id: string; }[]; }...' (the last line) and how to fix the problem?