diff --git a/packages/jupyter-chat/src/components/messages/messages.tsx b/packages/jupyter-chat/src/components/messages/messages.tsx
index 8922fbce..02a21fdc 100644
--- a/packages/jupyter-chat/src/components/messages/messages.tsx
+++ b/packages/jupyter-chat/src/components/messages/messages.tsx
@@ -115,7 +115,12 @@ export function ChatMessages(props: BaseMessageProps): JSX.Element {
     const observer = new IntersectionObserver(entries => {
       // Used on first rendering, to ensure all the message as been rendered once.
       if (!allRendered) {
-        Promise.all(renderedPromise.current.map(p => p.promise)).then(() => {
+        const activePromises = renderedPromise.current
+          // Filter out nulls signifying deleted messages
+          .filter(p => p)
+          .map(p => p.promise);
+
+        Promise.all(activePromises).then(() => {
           setAllRendered(true);
         });
       }
@@ -181,6 +186,11 @@ export function ChatMessages(props: BaseMessageProps): JSX.Element {
         )}
         <Box ref={refMsgBox} className={clsx(MESSAGES_BOX_CLASS)}>
           {messages.map((message, i) => {
+            // Skip rendering deleted messages while preventing sparse array
+            if (message.deleted) {
+              listRef.current[i] = null;
+              return null;
+            }
             renderedPromise.current[i] = new PromiseDelegate();
             return (
               // extra div needed to ensure each bubble is on a new line
diff --git a/ui-tests/tests/message-toolbar.spec.ts b/ui-tests/tests/message-toolbar.spec.ts
index bcc1e7c7..64207e02 100644
--- a/ui-tests/tests/message-toolbar.spec.ts
+++ b/ui-tests/tests/message-toolbar.spec.ts
@@ -129,20 +129,27 @@ test.describe('#messageToolbar', () => {
     ).not.toContain('(edited)');
   });
 
-  test('should set the message as deleted', async ({ page }) => {
+  test('should not render deleted message', async ({ page }) => {
     const chatPanel = await openChat(page, FILENAME);
-    const message = chatPanel
-      .locator('.jp-chat-messages-container .jp-chat-message')
-      .first();
+    const messagesContainer = chatPanel.locator('.jp-chat-messages-container');
+
+    const messageCountBefore = await messagesContainer
+      .locator('.jp-chat-message')
+      .count();
+    expect(messageCountBefore).toBe(1);
+
+    const message = messagesContainer.locator('.jp-chat-message').first();
     const messageContent = message.locator('.jp-chat-rendered-markdown');
 
     // Should display the message toolbar
     await messageContent.hover({ position: { x: 5, y: 5 } });
     await messageContent.locator('.jp-chat-toolbar jp-button').last().click();
 
-    await expect(messageContent).not.toBeVisible();
-    expect(
-      await message.locator('.jp-chat-message-header').textContent()
-    ).toContain('(message deleted)');
+    await expect(message).not.toBeVisible();
+
+    const messageCountAfter = await messagesContainer
+      .locator('.jp-chat-message')
+      .count();
+    expect(messageCountAfter).toBe(0);
   });
 });