diff --git a/src/elements/common/routing/index.js b/src/elements/common/routing/index.js.flow
similarity index 100%
rename from src/elements/common/routing/index.js
rename to src/elements/common/routing/index.js.flow
diff --git a/src/elements/common/routing/index.ts b/src/elements/common/routing/index.ts
new file mode 100644
index 0000000000..2dfdd524f7
--- /dev/null
+++ b/src/elements/common/routing/index.ts
@@ -0,0 +1 @@
+export { default as withRouterAndRef } from './withRouterAndRef';
diff --git a/src/elements/common/routing/withRouterAndRef.js b/src/elements/common/routing/withRouterAndRef.js.flow
similarity index 87%
rename from src/elements/common/routing/withRouterAndRef.js
rename to src/elements/common/routing/withRouterAndRef.js.flow
index 01df2dcfb5..c9ccf17d25 100644
--- a/src/elements/common/routing/withRouterAndRef.js
+++ b/src/elements/common/routing/withRouterAndRef.js.flow
@@ -5,7 +5,7 @@ import { Route } from 'react-router-dom';
 // Basically a workaround for the fact that react-router's withRouter cannot forward ref's through
 // functional components. Use this instead to gain the benefits of withRouter but also ref forwarding
 export default function withRouterAndRef(Wrapped: React.ComponentType<any>) {
-    const WithRouterAndRef = React.forwardRef<Object, React.Ref<any>>((props, ref) => (
+    const WithRouterAndRef = React.forwardRef((props: any, ref: React.Ref<any>) => (
         <Route>{routeProps => <Wrapped ref={ref} {...routeProps} {...props} />}</Route>
     ));
     const name = Wrapped.displayName || Wrapped.name || 'Component';
diff --git a/src/elements/common/routing/withRouterAndRef.tsx b/src/elements/common/routing/withRouterAndRef.tsx
new file mode 100644
index 0000000000..41a848528c
--- /dev/null
+++ b/src/elements/common/routing/withRouterAndRef.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { Route } from 'react-router-dom';
+
+// Basically a workaround for the fact that react-router's withRouter cannot forward ref's through
+// functional components. Use this instead to gain the benefits of withRouter but also ref forwarding
+export default function withRouterAndRef(Wrapped: React.ComponentType<Record<string, unknown>>) {
+    const WithRouterAndRef = React.forwardRef((props: Record<string, unknown>, ref: React.Ref<unknown>) => (
+        <Route>{routeProps => <Wrapped ref={ref} {...routeProps} {...props} />}</Route>
+    ));
+    const name = Wrapped.displayName || Wrapped.name || 'Component';
+    WithRouterAndRef.displayName = `withRouterAndRef(${name})`;
+    return WithRouterAndRef;
+}