Table outline is not visible when using in react app

[KARAN_S]

As you can see in the image i am trying to render the xml in my react app.

import React, { useState, useEffect, useRef } from "react";
import "./App.css";
import {
  Box,
  Button,
  Container,
  Drawer,
  List,
  ListItem,
  ListItemText,
  TextField,
  Typography
} from "@mui/material";
import DmnViewer from "dmn-js";
import 'dmn-js/dist/assets/diagram-js.css';
import 'dmn-js/dist/assets/dmn-font/css/dmn.css';
import DmnModeler from "dmn-js/lib/Modeler";

function App() {
  const [dmn, setDmn] = useState("");
  const viewerRef = useRef(null);

  useEffect(() => {
    fetch("/media/sample.dmn")
      .then((response) => response.text())
      .then((data) => setDmn(data));
  }, []);

  const handleParseClick = async () => {
    if (viewerRef.current) {
      viewerRef.current.destroy();
    }
    viewerRef.current = new DmnViewer({
      container: "#dmn-container"
    });
    try {
      await viewerRef.current.importXML(dmn);
      viewerRef.current.get("canvas").zoom("fit-viewport");
    } catch (error) {
      console.log("there was an error rendering the DMN", error);
    }
  };

  return (
    <div>
      <div id="sidebar">
        <Drawer
          variant="permanent"
          sx={{
            width: 240,
            flexShrink: 0,
            "& .MuiDrawer-paper": {
              width: 240,
              boxSizing: "border-box"
            }
          }}
        >
          <Typography variant="h6" noWrap component="div" sx={{ p: 2 }}>
            Unit Tests
          </Typography>
          <List>
            <ListItem button>
              <ListItemText primary="Singular rules" />
            </ListItem>
          </List>
        </Drawer>
      </div>
      <div id="content">
        <Box component="main" sx={{ flexGrow: 1, p: 2 }}>
          <Container
            style={{
              display: "flex",
              flexDirection: "row",
              maxWidth: "70%",
              gap: "20px"
            }}
          >
            <div id="input-area" style={{ width: "40%" }}>
              <Typography variant="h6" noWrap component="div" sx={{ p: 2 }}>
                Input cobol snippet
              </Typography>
              <TextField
                id="outlined-multiline-static"
                label="Cobol Snippet"
                multiline
                rows={4}
                defaultValue=""
                fullWidth
                variant="outlined"
              />
              <Button
                variant="contained"
                sx={{ mt: 2 }}
                onClick={handleParseClick}
              >
                Parse
              </Button>
            </div>
            <div
              id="dmn-container"
              style={{ width: "100%", height: "500px" }}
            ></div>
          </Container>
        </Box>
      </div>
    </div>
  );
}

export default App;

Output is coming, but the table lines are not coming. How to get the table layout so the output looks clean and neat.

[nikku]

Probably you do not inject the table editor styles?