CSSの記述内容が反映されない

実現したいこと

Reactでcssを使って画面表示をしたい

発生している問題・エラーメッセージ

React.jsで作成したページの文字フォントをCSSに記述した内容で変えたいのですが
cssファイルを読み込んでも表示に反映されません。
以下の様にごく単純なページを作成し、cssファイルで文字色を赤に変えようとしましたが
文字列「テスト表示」は黒のままです。
なおエラーは起きていない様です。
考えられる誤りは何でしょうか？

該当のソースコード

＜CssImportTest.tsx＞
import { createRoot } from "react-dom/client";
import styles from './test.css'

const rootElement = document.getElementById("root")!;
const root = createRoot(rootElement);

function CssImportTestComponent() {
return(
<div>
<p className={styles.dispTest}>テスト表示</p>
</div>
)
}
root.render(<CssImportTestComponent />);
export default CssImportTestComponent;

<test.css>
.dispTest {
color:red;
}

試したこと

cssを使う為、以下のインストールを実行
npm install @types/css-modules
npm install sass
npm install node-sass

またpackage.jsonに以下を記述
"sideEffects": [".css", ".scss"]

補足情報（FW/ツールのバージョンなど）

react.jsのバージョン情報：
+-- @emotion/react@11.10.5
+-- @emotion/styled@11.10.5
+-- @mui/x-data-grid@5.17.20
+-- @types/css-modules@1.0.2
+-- @types/pg@8.6.6
+-- @types/react-dom@18.0.9
+-- @types/react-table@7.7.12
+-- @types/react@18.0.25
+-- ajv@8.11.0
+-- axios@1.2.2
+-- bootstrap@5.1.3
+-- cross-env@7.0.3
+-- eslint-config-react-app@7.0.1
+-- eslint-plugin-flowtype@8.0.3
+-- eslint-plugin-import@2.26.0
+-- eslint-plugin-jsx-a11y@6.6.0
+-- eslint-plugin-react@7.30.1
+-- eslint@8.18.0
+-- http-proxy-middleware@2.0.6
+-- jquery@3.6.0
+-- merge@2.1.1
+-- nan@2.17.0
+-- node-sass@7.0.3
+-- oidc-client@1.11.5
+-- react-dom@18.2.0
+-- react-router-bootstrap@0.26.1
+-- react-router-dom@6.3.0
+-- react-scripts@5.0.1
+-- react@18.2.0
+-- reactstrap@9.1.1
+-- rimraf@3.0.2
+-- sass@1.57.1
+-- typescript@4.7.4
+-- web-vitals@2.1.4
+-- workbox-background-sync@6.5.3
+-- workbox-broadcast-update@6.5.3
+-- workbox-cacheable-response@6.5.3
+-- workbox-core@6.5.3
+-- workbox-expiration@6.5.3
+-- workbox-google-analytics@6.5.3
+-- workbox-navigation-preload@6.5.3
+-- workbox-precaching@6.5.3
+-- workbox-range-requests@6.5.3
+-- workbox-routing@6.5.3
+-- workbox-strategies@6.5.3
`-- workbox-streams@6.5.3