[React] Componentの条件分岐をswitchを使わずに書く

今までswitchを使ってこんな風に書いてた

const Pags : NextPage: () => {
  const { pageState } = useContext(PageStateContext);

  const TemplateComponent: FC = () => {
    switch(pageState) {
      case 'initial':
        return <InitialTemplate>;
      case 'confirm':
        return <ConfirmTemplate>;
      case 'complete':
        return <CompleteTemplate>;
      default:
        return <></>;
    }
  }

  return <TemplateComponent />;
}

今日教えてもらった書き方

const Pags : NextPage: () => {
  const { pageState } = useContext(PageState);

  return (
    {
      ['initial']: (<InitialTemplate />),
      ['confirm']: (<ConfirmTemplate />),
      ['complete']: (<CompleteTemplate />),
    }[pageState]
  );
}

疑問

これは、、文法的には何っていう書き方なんだろうか。。。

ソース

ここから取ってきたらしい。defaultの時の書き方も書いてある。