How to use conditional rendering with typscript discriminated union?

I have these types

type Props = {
  routes: Array<RouteInfo>;
  placment: MenuPlacmentTopBottom | MenuPlacmentLeftRight;
  fullHeight?: boolean;
};

and in my component I do a check on which it is:

const Navigation: React.FC<Props> = (props) => {
  const { placment } = props;

  if (placment === MenuPlacmentTopBottom.Top || placment === MenuPlacmentTopBottom.Bottom) {
    return <HeaderTopBottom {...props} />;
  } else {
    return <SideNav {...props} />;
  }
};

The HeaderTopBottom placment prop is of type: MenuPlacmeenter code herentTopBottom

While the SideNav is of type: MenuPlacmentLeftRight

I get the following error:

type ‘{ routes: RouteInfo[]; placment: MenuPlacmentTopBottom |
MenuPlacmentLeftRight; fullHeight?: boolean; }’ is not assignable to
type ‘Props’. Types of property ‘placment’ are incompatible.
Type ‘MenuPlacmentTopBottom | MenuPlacmentLeftRight’ is not assignable to type ‘MenuPlacmentTopBottom’.
Type ‘MenuPlacmentLeftRight.Left’ is not assignable to type ‘MenuPlacmentTopBottom’.

I dont get why? Should my check not be enough? I want to avoid explicit casting.

Using typescript 4.9.5