Troubleshooting Recursive Schema Definition

export type DeckId = S.To<typeof DeckId>;
export const DeckId = pipe(S.number, S.brand('DeckId'));

export type DeckName = S.To<typeof DeckName>;
export const DeckName = pipe(S.string, S.brand('DeckName'));

export type DeckColor = S.To<typeof DeckColor>;
export const DeckColor = pipe(S.string, S.brand('DeckColor'));

export interface DeckListItem {
  readonly id: DeckId;
  readonly name: DeckName;
  readonly colour: O.Option<DeckColor>;
  readonly subdecks: ReadonlyArray<DeckListItem>;
}


// Types of property 'colour' are incompatible.
//   Type 'Option<string & Brand<"DeckColor">>' is not assignable to type 'string | null'.
//     Type 'None<string & Brand<"DeckColor">>' is not assignable to type 'string'.ts(2322)
export const DeckListItem: S.Schema<DeckListItem> = S.lazy(() =>
  S.struct({
    id: DeckId,
    name: DeckName,
    colour: S.optionFromNullable(DeckColor),
    subdecks: S.array(DeckListItem)
  })
);

export type DeckId = S.To<typeof DeckId>;
export const DeckId = pipe(S.number, S.brand('DeckId'));

export type DeckName = S.To<typeof DeckName>;
export const DeckName = pipe(S.string, S.brand('DeckName'));

export type DeckColor = S.To<typeof DeckColor>;
export const DeckColor = pipe(S.string, S.brand('DeckColor'));

export interface DeckListItem {
  readonly id: DeckId;
  readonly name: DeckName;
  readonly colour: O.Option<DeckColor>;
  readonly subdecks: ReadonlyArray<DeckListItem>;
}


// Types of property 'colour' are incompatible.
//   Type 'Option<string & Brand<"DeckColor">>' is not assignable to type 'string | null'.
//     Type 'None<string & Brand<"DeckColor">>' is not assignable to type 'string'.ts(2322)
export const DeckListItem: S.Schema<DeckListItem> = S.lazy(() =>
  S.struct({
    id: DeckId,
    name: DeckName,
    colour: S.optionFromNullable(DeckColor),
    subdecks: S.array(DeckListItem)
  })
);