diff --git a/packages/svelte-lexical/src/lib/components/ImageResizer.svelte b/packages/svelte-lexical/src/lib/components/ImageResizer.svelte
index fb6e064..fee4234 100644
--- a/packages/svelte-lexical/src/lib/components/ImageResizer.svelte
+++ b/packages/svelte-lexical/src/lib/components/ImageResizer.svelte
@@ -1,13 +1,14 @@
 <script lang="ts">
   import type {LexicalEditor} from 'lexical';
   import {calculateZoomLevel} from '@lexical/utils';
+  import type {Writable} from 'svelte/store';
 
   export let onResizeStart: () => void;
   export let onResizeEnd: (
     width: 'inherit' | number,
     height: 'inherit' | number,
   ) => void;
-  export let buttonRef: HTMLButtonElement | null;
+  export let buttonRef: Writable<HTMLButtonElement | null>;
   export let imageRef: HTMLElement | null;
   export let maxWidth: number | null;
   export let editor: LexicalEditor;
@@ -241,7 +242,7 @@
   {#if !showCaption && captionsEnabled}
     <button
       class="image-caption-button"
-      bind:this={buttonRef}
+      bind:this={$buttonRef}
       on:click={() => {
         setShowCaption(!showCaption);
       }}>
diff --git a/packages/svelte-lexical/src/lib/core/plugins/Image/ImageComponent.svelte b/packages/svelte-lexical/src/lib/core/plugins/Image/ImageComponent.svelte
index b488b51..9ebc405 100644
--- a/packages/svelte-lexical/src/lib/core/plugins/Image/ImageComponent.svelte
+++ b/packages/svelte-lexical/src/lib/core/plugins/Image/ImageComponent.svelte
@@ -46,6 +46,7 @@
   import PlaceHolder from '../PlaceHolder.svelte';
   import AutoFocusPlugin from '../AutoFocusPlugin.svelte';
   import {getImageHistoryPluginType} from '../../composerContext.js';
+  import {writable, type Writable} from 'svelte/store';
 
   export let src: string;
   export let altText: string;
@@ -65,7 +66,7 @@
   let selection: BaseSelection | null = null;
 
   let imageRef: HTMLImageElement | null;
-  let buttonRef: HTMLButtonElement | null;
+  let buttonRef: Writable<HTMLButtonElement | null> = writable(null);
   let isSelected = createNodeSelectionStore(editor, nodeKey);
   let isResizing = false;
   let activeEditorRef: LexicalEditor;
@@ -104,7 +105,7 @@
 
   const onEnter = (event: KeyboardEvent) => {
     const latestSelection = getSelection();
-    const buttonElem = buttonRef;
+    const buttonElem = $buttonRef;
     if (
       $isSelected &&
       isNodeSelection(latestSelection) &&
@@ -126,7 +127,7 @@
   };
 
   const onEscape = (event: KeyboardEvent) => {
-    if (activeEditorRef === caption || buttonRef === event.target) {
+    if (activeEditorRef === caption || $buttonRef === event.target) {
       selection = null;
       editor.update(() => {
         $isSelected = true;