[Atomic Design]画面に画像とボタンがうまく表示されない

Question

前提・実現したいこと

Atomic Designに基づいてReactでのコンポーネント開発を行なっています。
その際に以下のような状態になってしまい、困っています。
何が原因なのでしょうか。
ご教授お願いします。

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

###ディレクトリ構成
-components
|-main.jsx
|-presentational
*|-atoms
** |-Fuga.jsx
** |-img
*|-Molecules
**|-Piyo.jsx
**|-img
*|-Organisms
**|-Hoge.jsx

該当のソースコード

import React from "react";
import Hoge from "./presentational/Organisms/Hoge";

export default function Sample() {
  return (
    <div>
      <Hoge />

import React from "react";
import styles from "./hoge.css";
import Fuga from "../atoms/Fuga";
import Piyo from "../Molecules/Piyo";

export default function Hoge() {
  return (
    <div className={styles.a}>
      <Fuga />
      <Piyo />
    </div>
  );
}

import React from "react";
import styles from "./Fuga.css";

export default function Fuga() {
  return (
    <div className={styles.a}>
      <img
        src="img/sample.png"
        className={styles.b}
        alt="description"
      />
    </div>
  );
}

import React from "react";
import styles from "./Piyo.css";
import Button from "../atoms/Button";

export default function Piyo() {
  return (
    <Button className={styles.a}>
      <img
        src="img/sample.png"
        className={styles.b}
        alt="description"
      />
      <span className={styles.c}>Piyo</span>
    </Button>
  );
}

Answer 1

create-react-appで簡単にcssを読み込むにはcss moduleを使うのが簡単でした。
参照