I want add a horizontal line as &:before element, but I am not getting why it is not getting render at all, also there is no error in console related to this.

Any Help Appreciated.

import React from 'react';
import { alpha, styled } from '@mui/system';
import { TreeView } from '@mui/x-tree-view/TreeView';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import ChevronRightIcon from '@mui/icons-material/ChevronRight';
import { TreeItem } from '@mui/x-tree-view/TreeItem';
import FolderIcon from '@mui/icons-material/Folder';

const StyledTreeItem = styled(TreeItem)(({ theme }) => ({
  position: 'relative',
  '&:before': {
    pointerEvents: 'none',
    content: '""',
    position: 'absolute',
    width: 14,
    left: -16,
    top: 14,
    borderBottom: (props: any) =>
      props.nodeId !== '1' && props.children?.length > 0
        ? `1px dashed ${alpha(theme.palette.text.primary, 0.4)}`
        : 'none',
  },
  '.MuiTreeItem-label': {
    display: 'flex',
    alignItems: 'center',
  },
  '.MuiTypography-body2': {
    fontWeight: 'inherit',
    flexGrow: 1,
  },
  '.MuiTreeItem-group': {
    // marginLeft: 7,
    paddingLeft: 18,
    borderLeft: `1px dashed ${alpha(theme.palette.text.primary, 0.4)}`,
  },
}));

const TeamsTree: React.FC = () => {
  const data = [
    {
      name: 'RSMSSB',
      children: [
        { name: 'Science', children: [] },
        {
          name: 'Mathematics',
          children: [
            { name: 'Polynomials', children: [] },
            { name: 'Inequalities', children: [] },
          ],
        },
        { name: 'English', children: [] },
      ],
    },
  ];

  const renderTree = (nodes: any) => (
    <StyledTreeItem key={nodes.name} nodeId={nodes.name} label={nodes.name} endIcon={<FolderIcon />}>
      {Array.isArray(nodes.children) ? nodes.children.map((node: any) => renderTree(node)) : null}
    </StyledTreeItem>
  );

  return (
    <TreeView
      defaultCollapseIcon={<ExpandMoreIcon />}
      defaultExpandIcon={<ChevronRightIcon />}
    >
      {data.map((node) => renderTree(node))}
    </TreeView>
  );
};

export default TeamsTree;

I’m troubleshooting why a horizontal line added as a &:before element isn’t rendering despite no console errors.