Uncaught Error: Cannot find module './styles.css' at webpackMissingModule を直したい

前提

現在TypeScript とReactで wavesurferを使用しようとしている者です。通常のJavaScriptでは上手く wavesurferを使用出来たのですが、TypeScriptとRecatを使用した状態ではなぜかエラーが出てしまい解決出来なかったので、このサイト
https://www.npmjs.com/package/wavesurfer-react
https://github.com/ShiiRochi/wavesurfer-react
の「wavesurfer-react」というライブラリーを使ってみようと考えました。以下がコードで、見本からコピペし、一部変更しました。また、文字数の関係上一部削除している箇所があります

import React, {
  useCallback,
  useEffect,
  useRef,
  useState,
  useMemo
} from "react";
import ReactDOM from "react-dom";
import styled from "styled-components";
import { WaveSurfer, WaveForm, Region, Marker } from "wavesurfer-react";
import "./styles.css";
import RegionsPlugin from "wavesurfer.js/dist/plugin/wavesurfer.regions.min";
import TimelinePlugin from "wavesurfer.js/dist/plugin/wavesurfer.timeline.min";
import MarkersPlugin from "wavesurfer.js/src/plugin/markers";

const Buttons = styled.div`
  display: inline-block;
`;

const Button = styled.button``;

/**
 * @param min
 * @param max
 * @returns {*}
 */
function generateNum(min, max) {
  return Math.random() * (max - min + 1) + min;
}

/**
 * @param distance
 * @param min
 * @param max
 * @returns {([*, *]|[*, *])|*[]}
 */
function generateTwoNumsWithDistance(distance, min, max) {
  const num1 = generateNum(min, max);
  const num2 = generateNum(min, max);
  // if num2 - num1 < 10
  if (num2 - num1 >= 10) {
    return [num1, num2];
  }
  return generateTwoNumsWithDistance(distance, min, max);
}

export function WSF() {
  const [timelineVis, setTimelineVis] = useState(true);

  const [markers, setMarkers] = useState([
    {
      time: 5.5,
      label: "V1",
      color: "#ff990a",
      draggable: true
    },
    {
      time: 10,
      label: "V2",
      color: "#00ffcc",
      position: "top"
    }
  ]);

  const plugins = useMemo(() => {
    return [
      {
        plugin: RegionsPlugin,
        options: { dragSelection: true }
      },
      timelineVis && {
        plugin: TimelinePlugin,
        options: {
          container: "#timeline"
        }
      },
      {
        plugin: MarkersPlugin,
        options: {
          markers: [{ draggable: true }]
        }
      }
    ].filter(Boolean);
  }, [timelineVis]);

  const toggleTimeline = useCallback(() => {
    setTimelineVis(!timelineVis);
  }, [timelineVis]);

  const [regions, setRegions] = useState([
    {
      id: "region-1",
      start: 0.5,
      end: 10,
      color: "rgba(0, 0, 0, .5)",
      data: {
        systemRegionId: 31
      }
    },
    {
      id: "region-2",
      start: 5,
      end: 25,
      color: "rgba(225, 195, 100, .5)",
      data: {
        systemRegionId: 32
      }
    },
    {
      id: "region-3",
      start: 15,
      end: 35,
      color: "rgba(25, 95, 195, .5)",
      data: {
        systemRegionId: 33
      }
    }
  ]);

  // use regions ref to pass it inside useCallback
  // so it will use always the most fresh version of regions list
  const regionsRef = useRef(regions);

  useEffect(() => {
    regionsRef.current = regions;
  }, [regions]);

  const regionCreatedHandler = useCallback(
    (region) => {
      console.log("region-created --> region:", region);

      if (region.data.systemRegionId) return;

      setRegions([
        ...regionsRef.current,
        { ...region, data: { ...region.data, systemRegionId: -1 } }
      ]);
    },
    [regionsRef]
  );

  const wavesurferRef = useRef();
  const handleWSMount = useCallback(
    (waveSurfer) => {
      if (waveSurfer.markers) {
        waveSurfer.clearMarkers();
      }

      wavesurferRef.current = waveSurfer;

      if (wavesurferRef.current) {
        wavesurferRef.current.load("/bensound-ukulele.mp3");

        wavesurferRef.current.on("region-created", regionCreatedHandler);

        wavesurferRef.current.on("ready", () => {
          console.log("WaveSurfer is ready");
        });

        wavesurferRef.current.on("region-removed", (region) => {
          console.log("region-removed --> ", region);
        });

        wavesurferRef.current.on("loading", (data) => {
          console.log("loading --> ", data);
        });

        if (window) {
          window.surferidze = wavesurferRef.current;
        }
      }
    },
    [regionCreatedHandler]
  );

  const generateRegion = useCallback(() => {
    if (!wavesurferRef.current) return;
    const minTimestampInSeconds = 0;
    const maxTimestampInSeconds = wavesurferRef.current.getDuration();
    const distance = generateNum(0, 10);
    const [min, max] = generateTwoNumsWithDistance(
      distance,
      minTimestampInSeconds,
      maxTimestampInSeconds
    );

    const r = generateNum(0, 255);
    const g = generateNum(0, 255);
    const b = generateNum(0, 255);

    setRegions([
      ...regions,
      {
        id: `custom-${generateNum(0, 9999)}`,
        start: min,
        end: max,
        color: `rgba(${r}, ${g}, ${b}, 0.5)`
      }
    ]);
  }, [regions, wavesurferRef]);
  const generateMarker = useCallback(() => {
    if (!wavesurferRef.current) return;
    const minTimestampInSeconds = 0;
    const maxTimestampInSeconds = wavesurferRef.current.getDuration();
    const distance = generateNum(0, 10);
    const [min] = generateTwoNumsWithDistance(
      distance,
      minTimestampInSeconds,
      maxTimestampInSeconds
    );

    const r = generateNum(0, 255);
    const g = generateNum(0, 255);
    const b = generateNum(0, 255);

    setMarkers([
      ...markers,
      {
        label: `custom-${generateNum(0, 9999)}`,
        time: min,
        color: `rgba(${r}, ${g}, ${b}, 0.5)`
      }
    ]);
  }, [markers, wavesurferRef]);

  const removeLastRegion = useCallback(() => {
    let nextRegions = [...regions];

    nextRegions.pop();

    setRegions(nextRegions);
  }, [regions]);
  const removeLastMarker = useCallback(() => {
    let nextMarkers = [...markers];

    nextMarkers.pop();

    setMarkers(nextMarkers);
  }, [markers]);



  const play = useCallback(() => {
    wavesurferRef.current.playPause();
  }, []);

  const handleRegionUpdate = useCallback((region, smth) => {
    console.log("region-update-end --> region:", region);
    console.log(smth);
  }, []);

  return (
    <div className="App">
      <WaveSurfer plugins={plugins} onMount={handleWSMount}>
        <WaveForm id="waveform" cursorColor="transparent">
          {regions.map((regionProps) => (
            <Region
              onUpdateEnd={handleRegionUpdate}
              key={regionProps.id}
              {...regionProps}
            />
          ))}
          {markers.map((marker, index) => {
            return (
              <Marker
                key={index}
                {...marker}
                onClick={(...args) => {
                  console.log("onClick", ...args);
                }}
                onDrag={(...args) => {
                  console.log("onDrag", ...args);
                }}
                onDrop={(...args) => {
                  console.log("onDrop", ...args);
                }}
              />
            );
          })}
        </WaveForm>
        <div id="timeline" />
      </WaveSurfer>
      <Buttons>
        <Button onClick={generateRegion}>Generate region</Button>
        <Button onClick={generateMarker}>Generte Marker</Button>
        <Button onClick={play}>Play / Pause</Button>
        <Button onClick={removeLastRegion}>Remove last region</Button>
        <Button onClick={removeLastMarker}>Remove last marker</Button>
        <Button onClick={shuffleLastMarker}>Shuffle last marker</Button>
        <Button onClick={toggleTimeline}>Toggle timeline</Button>
      </Buttons>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

しかし、
作業中に以下のエラーが発生しました。

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

App.tsx:7 Uncaught Error: Cannot find module './styles.css'
    at webpackMissingModule (App.tsx:7:1)
    at ./src/components/wavesurfer.jsx (App.tsx:7:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./src/App.tsx (bundle.js:17:80)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./src/index.tsx (wavesurfer.jsx:349:1)

試したことなど

このエラーで検索をかけるといくつか解決策がヒットしました。
https://stackoverflow.com/questions/46880664/webpack-missing-module-error-cannot-find-module
https://medium.com/@sapegin/css-modules-with-typescript-and-webpack-6b221ebe5f10
https://qiita.com/paranishian/items/bb02c91ec1004430e701

しかし、それぞれの記事で行っている操作の意図が分かりませんでした。
自分なりの大雑把な解釈としては、「何かしらの定義ファイル(webpack.confingファイルなど)を作成して、そこにReactがcssを読み込めるようにするコードを書く」と考えました。しかし、これらのサイトで言及されていたファイルがデフォルトで存在しませんでした。なので、/frontend/app/src/webpack.confing.tsのような感じで新しいファイルを作り、

module: {
  rules: [
    {
      test: /\.css$/,
      include: path.join(__dirname, 'src/components'),
      use: [
        'style-loader',
        {
          loader: 'typings-for-css-modules-loader',
          options: {
            modules: true,
            namedExport: true
          }
        }
      ]
    }
  ]
}

このように記述してみましたが、VSCode側でエラーになってしまいます。

未使用のラベル。ts(7028)
'webpack.confing.ts' は、グローバル スクリプト ファイルと見なされるため、'--isolatedModules' でコンパイルすることはできません。import、export、または空の 'export {}' ステートメントを追加して、これをモジュールにしてください。ts(1208)

CSSをインストールすればいいのではないかと考え、ReactにCssを入れてみましたがダメでした。
・環境としては、Docker、バックエンド側（RoR）とフロントエンド（React TypeScript）側に分けている。
・nodeは18系

　そもそもなぜエラーが発生しているのかよく理解できませんでした。ローカルで自分が記述したコードでエラーが発生しているのではなく、ライブラリー側でこのようなエラーが発生しているというようなエラー文なので原因が推測できません。App.tsxはほぼ初期値のままなのでこちらがエラーの原因ではないと思います

### App.tsx

import React from 'react';
import logo from './logo.svg';
// import './App.css';
import { WSF } from "./components/wavesurfer";


export function App() {
  return (
  <>
  <WSF />
  <h1>hello world</h1>
  </>
  );
}

// export default App;

https://codesandbox.io/s/wavesurfer-react-20-gqvb6?file=/src/index.js
コードサンドボックスでは正常に動いています。
何かしらアドバイスがあればよろしくお願いいたします。