diff --git a/src/components/Header/HeaderMenu.tsx b/src/components/Header/HeaderMenu.tsx
index 9b55224a0..b64d14724 100644
--- a/src/components/Header/HeaderMenu.tsx
+++ b/src/components/Header/HeaderMenu.tsx
@@ -1,9 +1,10 @@
 import React, { MouseEvent } from 'react';
-import IconButton from '@material-ui/core/IconButton';
 import MenuItem from '@material-ui/core/MenuItem';
 import Menu from '@material-ui/core/Menu';
 import AccountCircle from '@material-ui/icons/AccountCircle';
 
+import IconButton from '../../muiComponents/IconButton';
+
 import HeaderGreetings from './HeaderGreetings';
 
 interface Props {
diff --git a/src/components/Header/HeaderRight.tsx b/src/components/Header/HeaderRight.tsx
index 238e71302..59ae7f6c9 100644
--- a/src/components/Header/HeaderRight.tsx
+++ b/src/components/Header/HeaderRight.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect, MouseEvent } from 'react';
-import Button from '@material-ui/core/Button';
+
+import Button from '../../muiComponents/Button';
 
 import { RightSide } from './styles';
 import HeaderToolTip from './HeaderToolTip';
diff --git a/src/components/Header/HeaderToolTip.tsx b/src/components/Header/HeaderToolTip.tsx
index a0db0533d..5869b6f96 100644
--- a/src/components/Header/HeaderToolTip.tsx
+++ b/src/components/Header/HeaderToolTip.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import Tooltip from '@material-ui/core/Tooltip';
+
+import Tooltip from '../../muiComponents/Tooltip';
 
 import HeaderToolTipIcon, { TooltipIconType } from './HeaderToolTipIcon';
 
diff --git a/src/components/Header/HeaderToolTipIcon.tsx b/src/components/Header/HeaderToolTipIcon.tsx
index 501bb1ba6..7d0ce4dde 100644
--- a/src/components/Header/HeaderToolTipIcon.tsx
+++ b/src/components/Header/HeaderToolTipIcon.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
-import IconButton from '@material-ui/core/IconButton';
 import Info from '@material-ui/icons/Info';
 import Help from '@material-ui/icons/Help';
 import Search from '@material-ui/icons/Search';
 
+import IconButton from '../../muiComponents/IconButton';
+
 import { IconSearchButton, StyledExternalLink } from './styles';
 
 export type TooltipIconType = 'search' | 'help' | 'info';
diff --git a/src/muiComponents/Avatar/Avatar.tsx b/src/muiComponents/Avatar/Avatar.tsx
index 989009834..39a181d05 100644
--- a/src/muiComponents/Avatar/Avatar.tsx
+++ b/src/muiComponents/Avatar/Avatar.tsx
@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react';
 import { default as MaterialUIAvatar, AvatarProps } from '@material-ui/core/Avatar';
 
 // The default element type of MUI's Avatar is 'div' and we don't allow the change of this prop
-type AvatarRef = HTMLElementTagNameMap['div'];
+type AvatarRef = HTMLDivElement;
 
 const Avatar = forwardRef<AvatarRef, AvatarProps>(function Avatar(props, ref) {
   return <MaterialUIAvatar {...props} ref={ref} />;
diff --git a/src/muiComponents/Button/Button.tsx b/src/muiComponents/Button/Button.tsx
index 5ad93d930..ece385980 100644
--- a/src/muiComponents/Button/Button.tsx
+++ b/src/muiComponents/Button/Button.tsx
@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import { default as MaterialUIButton, ButtonProps } from '@material-ui/core/Button';
 
-type ButtonRef = HTMLElementTagNameMap['button'];
+type ButtonRef = HTMLButtonElement;
 
 const Button = forwardRef<ButtonRef, ButtonProps>(function Button(props, ref) {
   return <MaterialUIButton {...props} ref={ref} />;
diff --git a/src/muiComponents/IconButton/IconButton.tsx b/src/muiComponents/IconButton/IconButton.tsx
index 7621c5d75..0491e92d9 100644
--- a/src/muiComponents/IconButton/IconButton.tsx
+++ b/src/muiComponents/IconButton/IconButton.tsx
@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import { default as MaterialUIIconButton, IconButtonProps } from '@material-ui/core/IconButton';
 
-type IconButtonRef = HTMLElementTagNameMap['button'];
+type IconButtonRef = HTMLButtonElement;
 
 const IconButton = forwardRef<IconButtonRef, IconButtonProps>(function IconButton(props, ref) {
   return <MaterialUIIconButton {...props} ref={ref} />;
diff --git a/src/muiComponents/TextField/TextField.tsx b/src/muiComponents/TextField/TextField.tsx
index c33334499..f90db53e4 100644
--- a/src/muiComponents/TextField/TextField.tsx
+++ b/src/muiComponents/TextField/TextField.tsx
@@ -2,9 +2,9 @@ import React, { forwardRef } from 'react';
 import { default as MaterialUITextField, TextFieldProps } from '@material-ui/core/TextField';
 
 // The default element type of MUI's TextField is 'div'
-type TextFieldRef = HTMLElementTagNameMap['div'];
+type TextFieldRef = HTMLDivElement;
 
-const TextField = forwardRef<TextFieldRef, TextFieldProps>(function ToolTip({ InputProps, classes, ...props }, ref) {
+const TextField = forwardRef<TextFieldRef, TextFieldProps>(function TextField({ InputProps, classes, ...props }, ref) {
   return (
     <MaterialUITextField
       {...props}
diff --git a/src/muiComponents/Tooltip/Tooltip.tsx b/src/muiComponents/Tooltip/Tooltip.tsx
index b9e44a06c..5b17919ee 100644
--- a/src/muiComponents/Tooltip/Tooltip.tsx
+++ b/src/muiComponents/Tooltip/Tooltip.tsx
@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react';
 import { default as MaterialUITooltip, TooltipProps } from '@material-ui/core/Tooltip';
 
 // The default element type of MUI's Tooltip is 'div' and the change of this prop is not allowed
-type TooltipRef = HTMLElementTagNameMap['div'];
+type TooltipRef = HTMLDivElement;
 
 const Tooltip = forwardRef<TooltipRef, TooltipProps>(function ToolTip(props, ref) {
   return <MaterialUITooltip {...props} innerRef={ref} />;