diff --git a/src/components/ReportViewer/report-item.js b/src/components/ReportViewer/report-item.js
index 2c4a66cd..24458022 100644
--- a/src/components/ReportViewer/report-item.js
+++ b/src/components/ReportViewer/report-item.js
@@ -12,6 +12,7 @@ import TreeItem from '@mui/lab/TreeItem';
 import Typography from '@mui/material/Typography';
 import Label from '@mui/icons-material/Label';
 import ReportTreeViewContext from './report-tree-view-context';
+import { alpha } from '@mui/system';
 
 const useReportItemStyles = makeStyles((theme) => ({
     root: {
@@ -19,14 +20,6 @@ const useReportItemStyles = makeStyles((theme) => ({
         '&:hover > $content': {
             backgroundColor: theme.palette.action.hover,
         },
-        '&:focus > $content, &$selected > $content': {
-            backgroundColor: `var(--tree-view-bg-color, ${theme.palette.grey[400]})`,
-            color: 'var(--tree-view-color)',
-        },
-        '&:focus > $content $label, &:hover > $content $label, &$selected > $content $label':
-            {
-                backgroundColor: 'transparent',
-            },
     },
     content: {
         color: theme.palette.text.secondary,
@@ -34,9 +27,26 @@ const useReportItemStyles = makeStyles((theme) => ({
         borderBottomRightRadius: theme.spacing(2),
         paddingRight: theme.spacing(1),
         fontWeight: theme.typography.fontWeightMedium,
-        '$expanded > &': {
+        '&$expanded': {
             fontWeight: theme.typography.fontWeightRegular,
         },
+        /* &&.Mui-focused to increase specifity because mui5 has a rule for &.Mui-selected.Mui-focused */
+        /* &&$selected to increase specifity because we have a rule for &:hover > $content on root */
+        '&&.Mui-focused, &&$selected': {
+            backgroundColor: `var(--tree-view-bg-color, ${theme.palette.grey[400]})`,
+            color: 'var(--tree-view-color)',
+        },
+        // same as mui v4 behavior on label text only right after clicking in contrast to after moving away with arrow keys.
+        '&$selected $label:hover, &$selected.Mui-focused $label': {
+            backgroundColor: alpha(
+                theme.palette.primary.main,
+                theme.palette.action.selectedOpacity +
+                    theme.palette.action.hoverOpacity
+            ),
+        },
+        '&.Mui-focused $label, &:hover $label, &$selected $label': {
+            backgroundColor: 'transparent',
+        },
     },
     group: {
         marginLeft: 10,