Reactjs 将 useRef 与 useImperativeHandle 一起使用时，React 不会重新渲染

我有一个编辑器App，它由3个元素组成:MenuBar,EditorContent和div用于代码视图.MenuBar包含用于切换编辑器视图的所有按钮，包括在编辑器视图(RichText)和代码视图(Html)之间切换，这是通过使用

let [isCodeViewMode, setIsCodeViewMode] = useState(false);
useImperativeHandle(
    ref,
    () => ({
        getIsCodeViewMode: () => {
            return isCodeViewMode;
        },
    }),
    [isCodeViewMode]
);

并通过单击按钮来切换此值.在我的主应用程序中，我试图获取此状态的值，如果为假，则将d-none个类添加到代码视图中.以下是我在App中的代码:

    let menuBarRef = useRef<any>();
    let isCodeViewMode = menuBarRef.current?.getIsCodeViewMode();
    console.log(isCodeViewMode);

return (
        <div
            id="editor-container"
            className="ps-relative s-textarea p0 d-flex fd-column"
            style={{ width: "1500px", zIndex: 10 }}
        >
            <div className="js-sticky py6 bg-inherit btr-sm w100 ps-sticky t0 l0 z-nav s-editor-shadow js-plugin-container js-sticky">
                <MenuBar editor={editor as Editor} ref={menuBarRef} />
            </div>
            <div
                id="editor-content"
                className="overflow-scroll fl-grow1 outline-none p12 pt6 w100 s-prose js-editor ProseMirror"
            >
                <EditorContent editor={editor} />
            </div>

            <div
                className={`mw-editor__codemirror ${isCodeViewMode ? "" : "d-none"}`}
            >
                <textarea></textarea>
            </div>

问题是，虽然值isCodeViewMode在MenuBar组件中被正确更新，但在App组件中却没有被更新.我应该做些什么更改才能使其正常工作？