material-ui treeView のデフォルト展開している表示にしたいです。

Question

前提・実現したいこと

material-ui のツリーコンポーネントで
ツリー表示時に選択されている値まで階層が展開されているようなデザインにしたいです。

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

defaultExpanded の値に 階層をスラッシュ区切り指定する事まではわかり
値を入れてみたのですが上手く動作しませんでした。
試しに defaultExpanded=["Singlets_FSC", "Singlets_FSC/Singlets_SSC"] のように直接入れたときは
その階層まで上手く展開しました。

該当のソースコード

↓defaultExpanded に入れる値作成の処理

useEffect(() => {
        setRadioValue(defaultData);

        let oneIdx = defaultData.split("/");
        let openTree = [oneIdx[0]];

        //下記処理説明 [1, 2, 3] → [1, 1/2, 1/2/3] のような処理をしている
        for (let i = 1; i < oneIdx.length; i++) {
            let arr1 = [];
            arr1.push(openTree[i - 1]);
            arr1.push(oneIdx[i]);
            let arr2 = arr1.join("/");
            openTree.push(arr2);
        }
        openTree.pop();

        setExpandedValue(openTree);
    }, [defaultData]);

↓描画の処理

if (defaultData) {
        console.log(expandedValue);  //送付ログ245行目
        console.log(["Singlets_FSC", "Singlets_FSC/Singlets_SSC"]);
        console.log(typeof (expandedValue));
        console.log(typeof (["Singlets_FSC", "Singlets_FSC/Singlets_SSC"]));
        var toString = Object.prototype.toString;
        console.log(toString.call(expandedValue));
        console.log(toString.call(["Singlets_FSC", "Singlets_FSC/Singlets_SSC"]));
        if (expandedValue == ["Singlets_FSC", "Singlets_FSC/Singlets_SSC"]) {
            console.log("型チェック true");
        }

        if (!data || !Object.keys(data).length) {
            console.log(expandedValue);
            return <div className={classes.root}>
                <TreeView defaultExpanded={expandedValue} />
                {/* <TreeView defaultExpanded={["Singlets_FSC", "Singlets_FSC/Singlets_SSC"]} /> */}
            </div>
        }

        console.log(expandedValue);

        return (
            <div className={classes.root}>
                <TreeView defaultExpanded={expandedValue}>
                {/* <TreeView defaultExpanded={["Singlets_FSC", "Singlets_FSC/Singlets_SSC"]}> */}
                    {
                        makeTree(Object.keys(data)[0],
                            data[Object.keys(data)[0]],
                            Object.keys(data)[0])
                    }
                </TreeView>
            </div>
        );
    }

※描画処理箇所のログ
![

試したこと

それぞれの値の確認と型チェックを行いましたがログのように同じ値、同じ型となっていました。
ただ、型チェック後の == の比較が通らないという事に気づき、ここが原因となっていると予想は出来ているのですが、何故通らないのかがわからなかったので質問させて頂きました。
また、それが原因ではない場合は何が悪いのか教えて頂きたいです。

どなたか未熟な自分にご教示をお願いしたいです。

Answer 1

自己解決する事が出来ました。

デフォルト時だけで、ツリーを描画している間に動的に展開する処理が要らなかったため
defaultExpanded を使用していましたが、 defaultExpanded は一番最初のコンポーネントが読み込まれた瞬間だけの為、
["Singlets_FSC", "Singlets_FSC/Singlets_SSC"] のような生データでは上手く描画され
動的に作った値は defaultExpanded の値指定後に作成されていたため描画されないといった事が起きていました。

解決方法自体は簡単で defaultExpanded を expanded に変更するだけで上手く動作させる事が出来ました。

※追記
expanded指定の場合、逆にツリーをそれ以上開くことが出来なくなってしまうため
defaultExpanded指定で、指定する値の箇所は一つ親の値を参照してくるような処理に修正しました。