From 6b05bd54a8be1d3d92387f951702cc22a0ce6e52 Mon Sep 17 00:00:00 2001
From: R Midhun Suresh <hi@midhun.dev>
Date: Mon, 11 Aug 2025 11:45:29 +0530
Subject: [PATCH] Render component through `createElement`

So that we can use hooks in the event factory components
---
 src/modules/customComponentApi.ts | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/modules/customComponentApi.ts b/src/modules/customComponentApi.ts
index db2f9ab58a..6d94bdf12c 100644
--- a/src/modules/customComponentApi.ts
+++ b/src/modules/customComponentApi.ts
@@ -7,6 +7,7 @@ Please see LICENSE files in the repository root for full details.
 
 import { type MatrixEvent } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
+import { createElement } from "react";
 
 import type {
     CustomComponentsApi as ICustomComponentsApi,
@@ -16,7 +17,6 @@ import type {
     CustomMessageRenderHints as ModuleCustomCustomMessageRenderHints,
     MatrixEvent as ModuleMatrixEvent,
 } from "@element-hq/element-web-module-api";
-import type React from "react";
 
 type EventTypeOrFilter = Parameters<ICustomComponentsApi["registerMessageRenderer"]>[0];
 
@@ -112,7 +112,11 @@ export class CustomComponentsApi implements ICustomComponentsApi {
                 // Fall through to original component. If the module encounters an error we still want to display messages to the user!
             }
         }
-        return originalComponent?.() ?? null;
+
+        if (originalComponent) {
+            return createElement(originalComponent);
+        }
+        return null;
     }
 
     /**