diff --git a/packages/plugin-outline-pane/src/index.tsx b/packages/plugin-outline-pane/src/index.tsx
index 180b424ea..addebbb40 100644
--- a/packages/plugin-outline-pane/src/index.tsx
+++ b/packages/plugin-outline-pane/src/index.tsx
@@ -18,7 +18,9 @@ export function OutlinePaneContext(props: {
   hideFilter?: boolean;
 }) {
   const treeMaster = props.treeMaster || new TreeMaster(props.pluginContext, props.options);
-  const [masterPaneController, setMasterPaneController] = useState(new PaneController(props.paneName || MasterPaneName, treeMaster));
+  const [masterPaneController, setMasterPaneController] = useState(
+    () => new PaneController(props.paneName || MasterPaneName, treeMaster),
+  );
   useEffect(() => {
     return treeMaster.onPluginContextChange(() => {
       setMasterPaneController(new PaneController(props.paneName || MasterPaneName, treeMaster));
@@ -40,7 +42,9 @@ export const OutlinePlugin = (ctx: IPublicModelPluginContext, options: any) => {
   const { skeleton, config, canvas, project } = ctx;
 
   let isInFloatArea = true;
-  const hasPreferenceForOutline = config.getPreference().contains('outline-pane-pinned-status-isFloat', 'skeleton');
+  const hasPreferenceForOutline = config
+    .getPreference()
+    .contains('outline-pane-pinned-status-isFloat', 'skeleton');
   if (hasPreferenceForOutline) {
     isInFloatArea = config.getPreference().get('outline-pane-pinned-status-isFloat', 'skeleton');
   }
@@ -160,4 +164,4 @@ OutlinePlugin.meta = {
     ],
   },
 };
-OutlinePlugin.pluginName = 'OutlinePlugin';
\ No newline at end of file
+OutlinePlugin.pluginName = 'OutlinePlugin';