diff --git a/webapp/packages/core-administration/src/AdministrationScreen/ConfigurationWizard/Pages/ServerConfiguration/ServerConfigurationForm.tsx b/webapp/packages/core-administration/src/AdministrationScreen/ConfigurationWizard/Pages/ServerConfiguration/ServerConfigurationForm.tsx
index 0eadab70a8..c36c7b4c90 100644
--- a/webapp/packages/core-administration/src/AdministrationScreen/ConfigurationWizard/Pages/ServerConfiguration/ServerConfigurationForm.tsx
+++ b/webapp/packages/core-administration/src/AdministrationScreen/ConfigurationWizard/Pages/ServerConfiguration/ServerConfigurationForm.tsx
@@ -52,10 +52,10 @@ export const ServerConfigurationForm = observer(function ServerConfigurationForm
   onSave,
 }: Props) {
   const translate = useTranslate();
-  const [focusedRef] = useFocus({ focusFirstChild: true });
+  const [focusedRef] = useFocus<HTMLFormElement>({ focusFirstChild: true });
 
   return styled(useStyles(formStyles, boxStyles))(
-    <SubmittingForm onSubmit={onSave} name='server_config' ref={focusedRef as React.RefObject<HTMLFormElement>}>
+    <SubmittingForm onSubmit={onSave} name='server_config' ref={focusedRef}>
       <box as="div">
         <box-element as='div'>
           <group as="div">
diff --git a/webapp/packages/core-app/src/NavigationTree/NavigationTree.tsx b/webapp/packages/core-app/src/NavigationTree/NavigationTree.tsx
index f545a710ba..5b6f44f5e9 100644
--- a/webapp/packages/core-app/src/NavigationTree/NavigationTree.tsx
+++ b/webapp/packages/core-app/src/NavigationTree/NavigationTree.tsx
@@ -47,7 +47,7 @@ const navigationTreeStyles = css`
 export const NavigationTree = observer(function NavigationTree() {
   const navTreeService = useService(NavigationTreeService);
   const [onFocus, onBlur] = useActiveView(navTreeService.getView);
-  const [ref] = useFocus({ onFocus, onBlur });
+  const [ref] = useFocus<HTMLDivElement>({ onFocus, onBlur });
   const nodeChildren = useChildren();
   const isEnabled = usePermission(EPermission.public);
 
@@ -69,7 +69,7 @@ export const NavigationTree = observer(function NavigationTree() {
   }
 
   return styled(navigationTreeStyles)(
-    <tree as="div" tabIndex={0} ref={ref as React.RefObject<HTMLDivElement>}>
+    <tree as="div" tabIndex={0} ref={ref}>
       {nodeChildren.children.map(id => (
         <NavigationTreeNode key={id} id={id} parentId={ROOT_NODE_PATH}/>
       ))}
diff --git a/webapp/packages/core-app/src/shared/NavigationTabs/NavigationTabsBar/NavigationTabsBar.tsx b/webapp/packages/core-app/src/shared/NavigationTabs/NavigationTabsBar/NavigationTabsBar.tsx
index 47eb312aa6..57da00ce7b 100644
--- a/webapp/packages/core-app/src/shared/NavigationTabs/NavigationTabsBar/NavigationTabsBar.tsx
+++ b/webapp/packages/core-app/src/shared/NavigationTabs/NavigationTabsBar/NavigationTabsBar.tsx
@@ -41,7 +41,7 @@ const stylesArray = [styles];
 export const NavigationTabsBar = observer(function NavigationTabsBar() {
   const navigation = useService(NavigationTabsService);
   const [onFocus, onBlur] = useActiveView(navigation.getView);
-  const [ref] = useFocus({ onFocus, onBlur });
+  const [ref] = useFocus<HTMLDivElement>({ onFocus, onBlur });
 
   const handleSelect = useCallback((tabId: string) => navigation.selectTab(tabId), [navigation]);
   const handleClose = useCallback((tabId: string) => navigation.closeTab(tabId), [navigation]);
@@ -62,7 +62,7 @@ export const NavigationTabsBar = observer(function NavigationTabsBar() {
       ))}
       style={stylesArray}
       tabIndex={0}
-      ref={ref as React.RefObject<HTMLDivElement>}
+      ref={ref}
     >
       {navigation.tabIdList.map(tabId => (
         <TabPanel key={tabId} tabId={tabId}>
diff --git a/webapp/packages/core-blocks/src/useFocus.ts b/webapp/packages/core-blocks/src/useFocus.ts
index fa078a81e0..47b0beaba1 100644
--- a/webapp/packages/core-blocks/src/useFocus.ts
+++ b/webapp/packages/core-blocks/src/useFocus.ts
@@ -16,18 +16,18 @@ type FocusOptions = {
   onBlur?: () => void;
 }
 
-export function useFocus({
+export function useFocus<T extends HTMLElement>({
   focusFirstChild,
   onFocus,
   onBlur,
-}: FocusOptions): [React.RefObject<HTMLElement>, boolean] {
+}: FocusOptions): [React.RefObject<T>, boolean] {
   const [focus, setFocus] = useState(false);
-  const reference = useRef<HTMLElement>(null);
+  const reference = useRef<T>(null);
 
   useLayoutEffect(() => {
     if (reference.current !== null && focusFirstChild) {
       const firstFocusable = reference.current
-        .querySelector<HTMLElement>('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+        .querySelector<T>('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
 
       if (firstFocusable) {
         firstFocusable.focus();
diff --git a/webapp/packages/core-connections/src/Administration/Connections/ConnectionsTable/ConnectionForm/ConnectionForm.tsx b/webapp/packages/core-connections/src/Administration/Connections/ConnectionsTable/ConnectionForm/ConnectionForm.tsx
index c0e6634d28..b85a2b3195 100644
--- a/webapp/packages/core-connections/src/Administration/Connections/ConnectionsTable/ConnectionForm/ConnectionForm.tsx
+++ b/webapp/packages/core-connections/src/Administration/Connections/ConnectionsTable/ConnectionForm/ConnectionForm.tsx
@@ -39,10 +39,10 @@ export const ConnectionForm = observer(function ConnectionForm({
   controller,
 }: ConnectionFormProps) {
   const translate = useTranslate();
-  const [focusedRef] = useFocus({ focusFirstChild: true });
+  const [focusedRef] = useFocus<HTMLDivElement>({ focusFirstChild: true });
 
   return styled(useStyles(styles, formStyles))(
-    <connection-form as='div' ref={focusedRef as React.RefObject<HTMLDivElement>}>
+    <connection-form as='div' ref={focusedRef}>
       <box as="div">
         <box-element as='div'>
           <group as="div">
diff --git a/webapp/packages/core-connections/src/DatabaseAuthDialog/DatabaseAuthDialog.tsx b/webapp/packages/core-connections/src/DatabaseAuthDialog/DatabaseAuthDialog.tsx
index a8effa4255..81ecb71678 100644
--- a/webapp/packages/core-connections/src/DatabaseAuthDialog/DatabaseAuthDialog.tsx
+++ b/webapp/packages/core-connections/src/DatabaseAuthDialog/DatabaseAuthDialog.tsx
@@ -61,7 +61,7 @@ export const DatabaseAuthDialog = observer(function DatabaseAuthDialog({
   rejectDialog,
 }: DialogComponentProps<string, null>) {
   const connection = useConnectionInfo(payload);
-  const [focusedRef] = useFocus({ focusFirstChild: true });
+  const [focusedRef] = useFocus<HTMLFormElement>({ focusFirstChild: true });
   const { driver } = useDBDriver(connection.connectionInfo?.driverId || '');
   const controller = useController(DBAuthDialogController, payload, rejectDialog);
 
@@ -81,7 +81,7 @@ export const DatabaseAuthDialog = observer(function DatabaseAuthDialog({
       {(!connection.isLoaded() || connection.isLoading())
         ? <Loader />
         : (
-          <SubmittingForm onSubmit={controller.login} ref={focusedRef as React.RefObject<HTMLFormElement>}>
+          <SubmittingForm onSubmit={controller.login} ref={focusedRef}>
             <ObjectPropertyInfoForm
               prefix={`auth_${connection.connectionInfo?.id || ''} `}
               autofillToken={`section-${connection.connectionInfo?.id || ''} section-auth`}
diff --git a/webapp/packages/plugin-authentication/src/Administration/Users/UserForm/UserForm.tsx b/webapp/packages/plugin-authentication/src/Administration/Users/UserForm/UserForm.tsx
index 3db5775e9d..367c671b9e 100644
--- a/webapp/packages/plugin-authentication/src/Administration/Users/UserForm/UserForm.tsx
+++ b/webapp/packages/plugin-authentication/src/Administration/Users/UserForm/UserForm.tsx
@@ -138,7 +138,7 @@ export const UserForm = observer(function UserForm({
 }: Props) {
   const translate = useTranslate();
   const controller = useController(UserFormController, userId, onCancel);
-  const [focusedRef] = useFocus({ focusFirstChild: true });
+  const [focusedRef] = useFocus<HTMLFormElement>({ focusFirstChild: true });
 
   const handleLoginChange = useCallback(
     (value: string) => controller.credentials.login = value,
@@ -186,7 +186,7 @@ export const UserForm = observer(function UserForm({
           </Button>
         </TabList>
         <content-box as='div'>
-          <SubmittingForm onSubmit={controller.save} ref={focusedRef as React.RefObject<HTMLFormElement>}>
+          <SubmittingForm onSubmit={controller.save} ref={focusedRef}>
             <TabPanel tabId='info'>
               <flex-box as="div">
                 <flex-box-element as='div'>
diff --git a/webapp/packages/plugin-authentication/src/Dialog/AuthProviderForm/AuthProviderForm.tsx b/webapp/packages/plugin-authentication/src/Dialog/AuthProviderForm/AuthProviderForm.tsx
index 06974d6617..ac1ce255d2 100644
--- a/webapp/packages/plugin-authentication/src/Dialog/AuthProviderForm/AuthProviderForm.tsx
+++ b/webapp/packages/plugin-authentication/src/Dialog/AuthProviderForm/AuthProviderForm.tsx
@@ -27,13 +27,13 @@ export const AuthProviderForm = observer(function AuthProviderForm({
   credentials,
   authenticate,
 }: Props) {
-  const [elementRef] = useFocus({ focusFirstChild: true });
+  const [elementRef] = useFocus<HTMLDivElement>({ focusFirstChild: true });
   const handleChange = useCallback((key: string, value: string) => {
     credentials[key] = value;
   }, [credentials]);
 
   return styled(useStyles(formStyles))(
-    <login-form as='div' ref={elementRef as React.RefObject<HTMLDivElement>}>
+    <login-form as='div' ref={elementRef}>
       {provider.credentialParameters.map(parameter => parameter.user && (
         <group as="div" key={parameter.id}>
           <InputField
diff --git a/webapp/packages/plugin-connection-custom/src/CustomConnection/ConnectionFormDialog/ConnectionForm/ConnectionForm.tsx b/webapp/packages/plugin-connection-custom/src/CustomConnection/ConnectionFormDialog/ConnectionForm/ConnectionForm.tsx
index c596dc60a1..03da1da099 100644
--- a/webapp/packages/plugin-connection-custom/src/CustomConnection/ConnectionFormDialog/ConnectionForm/ConnectionForm.tsx
+++ b/webapp/packages/plugin-connection-custom/src/CustomConnection/ConnectionFormDialog/ConnectionForm/ConnectionForm.tsx
@@ -31,11 +31,11 @@ export const ConnectionForm = observer(function ConnectionForm({
   controller,
 }: ConnectionFormProps) {
   const translate = useTranslate();
-  const [focusedRef] = useFocus({ focusFirstChild: true });
+  const [focusedRef] = useFocus<HTMLDivElement>({ focusFirstChild: true });
 
   return styled(useStyles(formStyles))(
     <connection-form as='div'>
-      <connection-type as="div" ref={focusedRef as React.RefObject<HTMLDivElement>}>
+      <connection-type as="div" ref={focusedRef}>
         <Radio
           name="type"
           id="custom"
diff --git a/webapp/packages/plugin-connection-template/src/ConnectionDialog/ConnectionDialog.tsx b/webapp/packages/plugin-connection-template/src/ConnectionDialog/ConnectionDialog.tsx
index 355bbf6a47..d7de6e9722 100644
--- a/webapp/packages/plugin-connection-template/src/ConnectionDialog/ConnectionDialog.tsx
+++ b/webapp/packages/plugin-connection-template/src/ConnectionDialog/ConnectionDialog.tsx
@@ -45,7 +45,7 @@ const styles = css`
 export const ConnectionDialog = observer(function ConnectionDialog({
   rejectDialog,
 }: DialogComponentProps<null, null>) {
-  const [focusedRef] = useFocus({ focusFirstChild: true });
+  const [focusedRef] = useFocus<HTMLFormElement>({ focusFirstChild: true });
   const controller = useController(ConnectionController, rejectDialog);
   const translate = useTranslate();
   let title = translate('basicConnection_connectionDialog_newConnection');
@@ -81,7 +81,7 @@ export const ConnectionDialog = observer(function ConnectionDialog({
           {controller.isConnecting && translate('basicConnection_connectionDialog_connecting_message')}
         </center>
       ) : (
-        <SubmittingForm onSubmit={controller.onConnect} ref={focusedRef as React.RefObject<HTMLFormElement>}>
+        <SubmittingForm onSubmit={controller.onConnect} ref={focusedRef}>
           <ObjectPropertyInfoForm
             prefix={`auth_${controller.template?.id || ''}`}
             autofillToken={`section-${controller.template?.id || ''} section-auth`}