名前付きエクスポートを行うと一か所だけClassが反映されません

前提

Reactで名前付きエクスポートを行うと一箇所だけclassが反映されず、理由がわかりません。

実現したいこと

該当箇所(TwoColumn)にflexContainerというclassが反映されるようにしたいです。
記述したコードは下記の通りです。

two-column.js

import styles from './../styles/two-column.module.css'; export function TwoColumn({ children }) { return <div className={styles.flexContainer}>{children}</div>; } export function TwoColumnMain({ children }) { return <div className={styles.main}>{children}</div>; } export function TwoColumnSidebar({ children }) { return <div className={styles.sidebar}>{children}</div>; }

about.js

import { TwoColumn, TwoColumnMain, TwoColumnSidebar, } from '../components/two-column'; export default function About() { return ( <TwoColumn> <TwoColumnMain> <TwoColumnSidebar> </TwoColumnSidebar> </TwoColumnMain> </TwoColumn> ); }

TwoColumnMainとTwoColumnSidebarにはそれぞれ.mainと.sidebarが当たっているのですが、TwoColumnだけうまくclassが当たりません。

試したこと

記述ミスかと思い見返したり、googleで同じ現象がないか探してみたのですがヒットせず。
consoleにもエラーがありませんでしたので、皆目見当がつかずお力をお借りしたい所存です。