React Transition Groupでレンダーするコンポーネント内で、個別にアニメーションを設定したい。

前提・実現したいこと

ボタンを押すことでサイドバーを開くコンポーネントがあります。
下記はデモです。
Demo(CodeSandBox)
画面中央のボタンを押すことでサイドバーをレンダーします。
サイドバーはClose side barボタンか、薄暗い背景をクリックすることで閉じられます。

デモは以下のライブラリを使用および構成になっています。

React.js
React Transition Group
CSS module
SCSS

デモは薄暗い背景とサイドバーが左から表示されます。
サイドバーはデモのままのアニメーションで、薄暗い背景はフェードインおよびフェードアウトさせたいです。

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

サイドバーと背景が同じアニメーションで表示されます。

該当のソースコード

jsx
1import React, { useState } from "react";
2import style from "./styles.module.scss";
3import { CSSTransition } from "react-transition-group";
4import "./transition.scss";
5
6export default function App() {
7  const [sideBar, setSideBar] = useState(false);
8
9  return (
10    <div className={style.app__wrap}>
11      <button onClick={() => setSideBar(true)} className={style.app__button}>
12        Open side bar
13      </button>
14      <CSSTransition
15        classNames="side"
16        in={sideBar}
17        timeout={{
18          enter: 0,
19          exit: 500
20        }}
21        unmountOnExit
22      >
23        <SideBar setSideBar={setSideBar} />
24      </CSSTransition>
25    </div>
26  );
27}
28
29const SideBar = ({ setSideBar }) => {
30  return (
31    <div className={style.side__wrap} onClick={() => setSideBar(false)}>
32      <div className={style.side__contents} onClick={e => e.stopPropagation()}>
33        <h2>Side bar</h2>
34        <button onClick={() => setSideBar(false)} className={style.app__button}>
35          Close side bar
36        </button>
37      </div>
38    </div>
39  );
40};

トランジションのスタイル

scss
1.side-enter-active {
2  transform: translateX(-100vw);
3}
4
5.side-enter-done {
6  transform: translateX(0);
7  transition: 0.3s;
8}
9
10.side-exit-active {
11  transform: translateX(-100vw);
12  transition: 0.3s;
13}

試したこと

サイドバーのコンポーネントにトランジション用のクラスを付与し、トランジションのスタイルに付与したクラス別にスタイルを書いてみました。
コードは下記の通りです。
結果は、アニメーションが発生しなくなりました。

jsx
1const SideBar = ({ setSideBar }) => {
2  return (
3    <div className={`"sideBackground" ${style.side__wrap}`} onClick={() => setSideBar(false)}>
4      <div className={`"sideContents" ${style.side__contents}`} onClick={e => e.stopPropagation()}>
5        <h2>Side bar</h2>
6        <button onClick={() => setSideBar(false)} className={style.app__button}>
7          Close side bar
8        </button>
9      </div>
10    </div>
11  );
12};

scss
1.side-enter-active {
2  .sideBackground {
3    opacity: 0;
4  }
5  .sideContents {
6    transform: translateX(-100vw);
7  }
8}
9
10.side-enter-done {
11  .sideBackground {
12    opacity: 1;
13  }
14  .sideContents {
15    transform: translateX(0);
16    transition: 0.3s
17  }
18}
19
20.side-exit-active {
21  .sideBackground {
22    opacity: 0;
23  }
24  .sideContents {
25    transform: translateX(-100vw);
26    transition: 0.3s
27  }
28}