diff --git a/src/notifications/NotificationAction.tsx b/src/notifications/NotificationAction.tsx
index e4b24f0e..2f50465e 100644
--- a/src/notifications/NotificationAction.tsx
+++ b/src/notifications/NotificationAction.tsx
@@ -8,17 +8,19 @@ import React from 'react';
 import { MessageId } from './i18n';
 import en from './i18n.en.json';
 
-type OwnProps = {
+type NotificationActionProps = {
     messageId: MessageId;
     replacements?: Replacements;
 };
 
-export default function NotificationAction(props: OwnProps): JSX.Element {
+const NotificationAction: React.FC<NotificationActionProps> = (props) => {
     const [i18n] = useI18n({
         id: 'notification',
         translations: { en },
         fallback: en,
     });
-    const { messageId, replacements } = props;
-    return <>{i18n.translate(messageId, replacements)}</>;
-}
+
+    return <>{i18n.translate(props.messageId, props.replacements)}</>;
+};
+
+export default NotificationAction;
diff --git a/src/notifications/NotificationMessage.tsx b/src/notifications/NotificationMessage.tsx
index d191526b..2eb20119 100644
--- a/src/notifications/NotificationMessage.tsx
+++ b/src/notifications/NotificationMessage.tsx
@@ -8,19 +8,19 @@ import React from 'react';
 import { MessageId } from './i18n';
 import en from './i18n.en.json';
 
-type OwnProps = {
+type NotificationMessageProps = {
     messageId: MessageId;
     replacements?: Replacements;
 };
 
-export default function NotificationMessage(props: OwnProps): JSX.Element {
+const NotificationMessage: React.FC<NotificationMessageProps> = (props) => {
     const [i18n] = useI18n({
         id: 'notification',
         translations: { en },
         fallback: en,
     });
-    const { messageId, replacements } = props;
-    let message = i18n.translate(messageId, replacements) as
+
+    let message = i18n.translate(props.messageId, props.replacements) as
         | React.ReactElement
         | string;
 
@@ -36,4 +36,6 @@ export default function NotificationMessage(props: OwnProps): JSX.Element {
     }
 
     return message;
-}
+};
+
+export default NotificationMessage;
diff --git a/src/notifications/UnexpectedErrorNotification.tsx b/src/notifications/UnexpectedErrorNotification.tsx
index 84f2d61e..8747b284 100644
--- a/src/notifications/UnexpectedErrorNotification.tsx
+++ b/src/notifications/UnexpectedErrorNotification.tsx
@@ -9,21 +9,25 @@ import React from 'react';
 import { MessageId } from './i18n';
 import en from './i18n.en.json';
 
-type OwnProps = {
+type UnexpectedErrorNotificationProps = {
     messageId: MessageId;
     err: Error;
 };
 
-export default function UnexpectedErrorNotification(props: OwnProps): JSX.Element {
+const UnexpectedErrorNotification: React.FC<UnexpectedErrorNotificationProps> = (
+    props,
+) => {
     const [i18n] = useI18n({
         id: 'notification',
         translations: { en },
         fallback: en,
     });
-    const { messageId, err } = props;
+
     return (
         <>
-            <p>{i18n.translate(messageId, { errorMessage: err.message })}</p>
+            <p>
+                {i18n.translate(props.messageId, { errorMessage: props.err.message })}
+            </p>
             <div>
                 <ButtonGroup minimal={true} fill={true}>
                     <Button
@@ -31,7 +35,9 @@ export default function UnexpectedErrorNotification(props: OwnProps): JSX.Elemen
                         icon="duplicate"
                         onClick={() =>
                             navigator.clipboard.writeText(
-                                `\`\`\`\n${err.stack || err.message}\n\`\`\``,
+                                `\`\`\`\n${
+                                    props.err.stack || props.err.message
+                                }\n\`\`\``,
                             )
                         }
                     >
@@ -42,7 +48,7 @@ export default function UnexpectedErrorNotification(props: OwnProps): JSX.Elemen
                         icon="virus"
                         href={`https://github.com/pybricks/support/issues?q=${encodeURIComponent(
                             'is:issue',
-                        )}+${encodeURIComponent(err.message)}`}
+                        )}+${encodeURIComponent(props.err.message)}`}
                         target="_blank"
                     >
                         {i18n.translate(MessageId.ReportBug)}
@@ -51,4 +57,6 @@ export default function UnexpectedErrorNotification(props: OwnProps): JSX.Elemen
             </div>
         </>
     );
-}
+};
+
+export default UnexpectedErrorNotification;