switcherIcon not working as expected

I want to implenent switcher icon with fontawesome icons but its not working. it still shows the default icons

here is my code,

                      <Tree
                          defaultExpandAll={false}
                          selectable={false}
                          switcherIcon={(obj) =>
                            obj.expanded ? (
                              <i className="fa-solid fa-arrow-down"></i>
                            ) : (
                              <i className="fa-solid fa-arrow-up"></i>
                            )
                          }
                        >

here is a code sample https://codesandbox.io/s/inspiring-ride-jqnlzo?file=/App.jsx

Start with App.jsx in the linked CodeSandbox and inspect the Tree component's switcherIcon entry point. Reproduce the issue, determine why the default icon remains instead of the supplied Font Awesome icons, and consider the issue done when the expanded and collapsed states render the requested icons.