diff --git a/web/packages/shared/components/DialogBox/TitleWithCloseButton.tsx b/web/packages/shared/components/DialogBox/TitleWithCloseButton.tsx
index 54ed1486d994f38ca81b51f87997dc135cdb192b..35304b9cf08d77f1d7453f582e67834eedf20716 100644
--- a/web/packages/shared/components/DialogBox/TitleWithCloseButton.tsx
+++ b/web/packages/shared/components/DialogBox/TitleWithCloseButton.tsx
@@ -6,12 +6,17 @@ import {
     Typography,
     type DialogProps,
 } from "@mui/material";
+import React from "react";
 
-const DialogTitleWithCloseButton = (props) => {
-    const { children, onClose, ...other } = props;
+interface DialogTitleWithCloseButtonProps {
+    onClose: () => void;
+}
 
+const DialogTitleWithCloseButton: React.FC<
+    React.PropsWithChildren<DialogTitleWithCloseButtonProps>
+> = ({ children, onClose }) => {
     return (
-        <DialogTitle {...other}>
+        <DialogTitle>
             <SpaceBetweenFlex>
                 <Typography variant="h3" fontWeight={"bold"}>
                     {children}