Reactで変数の値に応じて開閉をしたい

Question

#実現させたいこと

画像の矢印を押したらツリーを閉じるようにしたい。
右のログは矢印を押したときの変数のログです。
クリックするごとにきちんと値が変わっています。

###試したこと
変数の宣言の位置をif文の外に出してみたりvarに変えてみたりと試したが動きませんでした。

変数の値をfalseにしてみたところ、以下の画像のようにツリーが閉じたので、変数の更新が読み取れていないのかなと思っています。

#該当のコード

type Props = {
    trees: any[]

}
const FolderTree: React.FC<Props> = ({ trees }) => {
    return (
        <div className="tree">
            <ul >
                {
                    trees.map((tree, index) => {
                        //console.log(tree.children)
                        if (tree.children === undefined) {
                            //let open = true;
                            return (
                                <li key={index}>
                                    <i className="fas fa-chevron-right"></i>
                                    <i className="fas fa-folder"></i>
                                    {tree.name}
                                </li>
                            )
                        } else {
                            let open = false; //変数
                            return (
                                <div className="children">

                                    <li key={index}>
                                        <i className="fas fa-chevron-right"
                                            onClick={() => {
                                                open = !open
                                                console.log(tree.name + ":" + open);
                                            }}
                                            style={{
                                                cursor: "pointer",
                                                transform: (!open ? "" : "rotate(90deg)"),
                                            }}
                                        >
                                        </i>
                                        <i className="fas fa-folder"></i>
                                        {tree.name}:{open} //ここのopenの値は表示されない
                                    </li>
                                    {
                                        open &&　//ここのopenで問題が発生していると思われる。
                                        <FolderTree trees={tree.children} />
                                    }
                                </div>

                            )
                        }

                    })}
            </ul>
        </div>
    )
}

Answer 1

Reactの関数コンポーネントは描画のたびに実行されますので、ローカル変数を書き換えても、次の描画の際には残りません。

描画を超えて保管しないといけない値は、useStateを使って記録してください（React公式）。