diff --git a/packages/frontend-plugin-api/src/components/createComponentRef.test.tsx b/packages/frontend-plugin-api/src/components/createComponentRef.test.tsx
index e20a35ff84..32912ca3d5 100644
--- a/packages/frontend-plugin-api/src/components/createComponentRef.test.tsx
+++ b/packages/frontend-plugin-api/src/components/createComponentRef.test.tsx
@@ -18,7 +18,7 @@ import { createComponentRef } from './createComponentRef';
 
 describe('createComponentRef', () => {
   it('can be created and read', () => {
-    const ref = createComponentRef({ id: 'foo' });
+    const ref = createComponentRef({ id: 'foo', mode: 'sync' });
     expect(ref.id).toBe('foo');
     expect(String(ref)).toBe('ComponentRef{id=foo}');
   });
@@ -45,7 +45,6 @@ describe('createComponentRef', () => {
       defaultComponent: async ({ bar }) => <Test key={bar} />,
     });
 
-    // todo: why do we have two errors here?
     // @ts-expect-error - this should be an error as mode is async
     createComponentRef<{ foo: string }, { bar: string }>({
       id: 'foo',
@@ -53,11 +52,9 @@ describe('createComponentRef', () => {
       defaultComponent: ({ bar }) => <Test key={bar} />,
     });
 
-    // todo: why does this not work?
     createComponentRef<{ foo: string }, { bar: string }>({
       id: 'foo',
-      // @ts-expect-error - this should be an error as default mode is async
-      defaultComponent: ({ bar }) => <Test key={bar} />,
+      mode: 'sync',
     });
 
     expect(Test).toBeDefined();
@@ -66,11 +63,13 @@ describe('createComponentRef', () => {
   it('should allow transformings props', () => {
     createComponentRef<{ foo: string }, { bar: string }>({
       id: 'foo',
+      mode: 'sync',
       transformProps: props => ({ foo: props.bar }),
     });
 
     createComponentRef<{ foo: string }, { bar: string }>({
       id: 'foo',
+      mode: 'sync',
       // @ts-expect-error - this should be an error as foo is not a string
       transformProps: props => ({ foo: 1 }),
     });
diff --git a/packages/frontend-plugin-api/src/components/createComponentRef.tsx b/packages/frontend-plugin-api/src/components/createComponentRef.tsx
index 9f36e7f21e..37095ca055 100644
--- a/packages/frontend-plugin-api/src/components/createComponentRef.tsx
+++ b/packages/frontend-plugin-api/src/components/createComponentRef.tsx
@@ -18,26 +18,30 @@
 export type ComponentRef<
   TInnerComponentProps,
   TExternalComponentProps,
-  TMode extends 'sync' | 'async' = 'async',
+  TMode extends 'sync' | 'async',
 > = {
   id: string;
   mode: TMode;
   transformProps?: (props: TExternalComponentProps) => TInnerComponentProps;
   defaultComponent?: TMode extends 'async'
     ? (props: TExternalComponentProps) => Promise<JSX.Element>
-    : (props: TExternalComponentProps) => JSX.Element;
+    : TMode extends 'sync'
+    ? (props: TExternalComponentProps) => JSX.Element
+    : never;
 };
 
 export interface ComponentRefOptions<
   TInnerComponentProps,
   TExternalComponentProps,
-  TMode extends 'sync' | 'async' = 'async',
+  TMode extends 'sync' | 'async',
 > {
   id: string;
-  mode?: TMode;
+  mode: TMode;
   defaultComponent?: TMode extends 'async'
     ? (props: TExternalComponentProps) => Promise<JSX.Element>
-    : (props: TExternalComponentProps) => JSX.Element;
+    : TMode extends 'sync'
+    ? (props: TExternalComponentProps) => JSX.Element
+    : never;
   transformProps?: (props: TExternalComponentProps) => TInnerComponentProps;
 }
 
@@ -82,7 +86,7 @@ export function createComponentRef<
     TMode
   >,
 ): ComponentRef<TInnerComponentProps, TExternalComponentProps, TMode> {
-  const { id, mode = 'async', defaultComponent, transformProps } = options;
+  const { id, mode, defaultComponent, transformProps } = options;
 
   return {
     id,