diff --git a/src/accessibility/RovingTabIndex.tsx b/src/accessibility/RovingTabIndex.tsx
index 6682e1068b..75fc461cc4 100644
--- a/src/accessibility/RovingTabIndex.tsx
+++ b/src/accessibility/RovingTabIndex.tsx
@@ -17,6 +17,7 @@ import React, {
     Dispatch,
     RefObject,
     ReactNode,
+    RefCallback,
 } from "react";
 
 import { getKeyBindingsManager } from "../KeyBindingsManager";
@@ -354,7 +355,7 @@ export const RovingTabIndexProvider: React.FC<IProps> = ({
  */
 export const useRovingTabIndex = <T extends HTMLElement>(
     inputRef?: RefObject<T>,
-): [FocusHandler, boolean, (node: T | null) => void, RefObject<T | null>] => {
+): [FocusHandler, boolean, RefCallback<T>, RefObject<T | null>] => {
     const context = useContext(RovingTabIndexContext);
 
     let nodeRef = useRef<T | null>(null);
diff --git a/src/accessibility/roving/RovingTabIndexWrapper.tsx b/src/accessibility/roving/RovingTabIndexWrapper.tsx
index c6a67ac783..b44f44b92f 100644
--- a/src/accessibility/roving/RovingTabIndexWrapper.tsx
+++ b/src/accessibility/roving/RovingTabIndexWrapper.tsx
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { ReactElement } from "react";
+import React, { ReactElement, RefCallback } from "react";
 
 import { useRovingTabIndex } from "../RovingTabIndex";
 import { FocusHandler, Ref } from "./types";
@@ -16,7 +16,7 @@ interface IProps {
     children(renderProps: {
         onFocus: FocusHandler;
         isActive: boolean;
-        ref: (node: HTMLElement | null) => void;
+        ref: RefCallback<HTMLElement>;
     }): ReactElement<any, any>;
 }
 
diff --git a/src/components/views/elements/StyledCheckbox.tsx b/src/components/views/elements/StyledCheckbox.tsx
index 42a02ea9b7..d2ea5ccc87 100644
--- a/src/components/views/elements/StyledCheckbox.tsx
+++ b/src/components/views/elements/StyledCheckbox.tsx
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React from "react";
+import React, { RefCallback } from "react";
 import { randomString } from "matrix-js-sdk/src/randomstring";
 import classnames from "classnames";
 
@@ -16,7 +16,7 @@ export enum CheckboxStyle {
 }
 
 interface IProps extends React.InputHTMLAttributes<HTMLInputElement> {
-    inputRef?: (node: HTMLInputElement | null) => void;
+    inputRef?: RefCallback<HTMLInputElement>;
     kind?: CheckboxStyle;
     id?: string;
 }
diff --git a/src/components/views/elements/StyledRadioButton.tsx b/src/components/views/elements/StyledRadioButton.tsx
index 74c9b4a2fc..26dcd50624 100644
--- a/src/components/views/elements/StyledRadioButton.tsx
+++ b/src/components/views/elements/StyledRadioButton.tsx
@@ -6,11 +6,11 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React from "react";
+import React, { RefCallback } from "react";
 import classnames from "classnames";
 
 interface IProps extends React.InputHTMLAttributes<HTMLInputElement> {
-    inputRef?: (node: HTMLInputElement | null) => void;
+    inputRef?: RefCallback<HTMLInputElement>;
     outlined?: boolean;
     // If true (default), the children will be contained within a <label> element
     // If false, they'll be in a div. Putting interactive components that have labels