I searched a lot for that in the end I made this by myself sandbox. you can choose to parent or child with this and you can custom it easily.

    import { ThemeProvider, createTheme } from "@mui/material/styles";
import React, { useState } from "react";
import ReactDOM from "react-dom";
import TreeItem from "@mui/lab/TreeItem";
import { Popover, TextField, Typography } from "@mui/material";
import clsx from "clsx";
import { TreeView, useTreeItem } from "@mui/lab";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
import { useMediaQuery } from "@mui/material";
const data = [
  {
    id: "root",
    name: "Parent",
    children: [
      {
        id: "1",
        name: "Child - 1"
      },
      {
        id: "3",
        name: "Child - 3",
        children: [
          {
            id: "4",
            name: "Child - 4"
          }
        ]
      }
    ]
  },
  {
    id: "1root",
    name: "Parent1",
    children: [
      {
        id: "5",
        name: "Child - 1-1"
      },
      {
        id: "7",
        name: "Child - 3-1",
        children: [
          {
            id: "8",
            name: "Child - 4-1"
          }
        ]
      }
    ]
  }
];
const CustomContent = React.forwardRef(function CustomContent(props, ref) {
  const {
    classes,
    className,
    label,
    nodeId,
    icon: iconProp,
    expansionIcon,
    displayIcon
  } = props;

  const {
    disabled,
    expanded,
    selected,
    focused,
    handleExpansion,
    handleSelection,
    preventSelection
  } = useTreeItem(nodeId);

  const icon = iconProp || expansionIcon || displayIcon;

  const handleMouseDown = (event) => {
    preventSelection(event);
  };

  const handleExpansionClick = (event) => {
    handleExpansion(event);
  };

  const handleSelectionClick = (event) => {
    handleSelection(event);
  };

  return (
    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
    <div
      className={clsx(className, classes.root, {
        [classes.expanded]: expanded,
        [classes.selected]: selected,
        [classes.focused]: focused,
        [classes.disabled]: disabled
      })}
      onMouseDown={handleMouseDown}
      ref={ref}
      style={{ padding: "3px 0" }}
    >
      <div onClick={handleExpansionClick} className={classes.iconContainer}>
        {icon}
      </div>
      <Typography
        onClick={handleSelectionClick}
        component="div"
        className={classes.label}
      >
        {label}
      </Typography>
    </div>
  );
});
const CustomTreeItem = (props) => (
  <TreeItem ContentComponent={CustomContent} {...props} />
);

export default function RichObjectTreeView({ formik, edit }) {
  const [anchorEl, setAnchorEl] = React.useState(null);
  const [equipmentItem, setEquipmentItem] = useState("");
  const [equipmentId, setEquipmentId] = useState("");
  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  const open = Boolean(anchorEl);
  const id = open ? "simple-popover" : undefined;

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

  return (
    <>
      <TextField
        variant="standard"
        required={false}
        label="Equipment Item"
        name="equipmentItem"
        id="equipmentItem"
        defaultValue={equipmentItem}
        value={equipmentItem}
        className="w-100"
        inputProps={{ readOnly: !edit }}
        onClick={handleClick}
      />

      <Popover
        id={id}
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "left"
        }}
      >
        <TreeView
          aria-label="icon expansion"
          defaultSelected={equipmentId}
          selected={equipmentId}
          defaultCollapseIcon={<ExpandMoreIcon />}
          defaultExpandIcon={<ChevronRightIcon />}
          onNodeSelect={(e, id) => {
            setEquipmentId(id);
            setEquipmentItem(e.target.innerText);
          }}
          sx={{
            height: 200,
            flexGrow: 1,
            minWidth: "200px",
            overflowY: "auto"
          }}
        >
          {data.map((item, i) => renderTree(item))}
        </TreeView>
      </Popover>
    </>
  );
}