How to display two of the same grids on the same page?

Question

I am trying to display two of the same grid on one page. The first one has always been displayed there, but I am trying to add a second which displays the "Shared patient" list (currently the same list). I copied and pasted the first grid's code and changed the title to make the second. The first one still appears just fine, but the second is no where to be found. What is going wrong? Here is the code:

const gridConfig = {
  columns: [
    { field: "firstName", title: "First Name" },
    { field: "lastName", title: "Last Name" },
    {
      field: "lastSessionDate",
      title: "Latest Use",
      cell: KendoGridDateCell,
    },
    { field: "email", title: "Email" },
  ],
};

const gridConfigBrief = {
  columns: [
    { field: "firstName", title: "First" },
    { field: "lastName", title: "Last" },
  ],
}

const useStyles = makeStyles((theme: Theme) => ({
  root: {
    position: "relative",
    paddingTop: theme.spacing(1,2),
    height: "100%",
  },
  container: {
    position: "relative",
    height: "100%",
    marginTop: "20px"
  },
  breadcrumb: {
    height: "28px",
    fontFamily: "Open Sans",
    fontSize: "12px"
  },
  content: {
    position: "relative",
    height: "calc(100% - 328px)",
    padding: 12,
  },
  usageChart: {
    position: "relative",
    height: 250,
  },
  gridHeaderEdit: {
    textAlign: "center!important" as any,
  },
  formControl: {
    width: '100%',
    padding: theme.spacing(1),
    },
  cardHeader: {
    padding: 0,
  },
  buttons: {
    display: 'flex',
    justifyContent: 'center',
    '& > *': {
      marginLeft: theme.spacing(1)
    }
  },
  inner: {
    minWidth: 500,
  },
  divider: {
    backgroundColor: 'yellowgreen',
    marginTop: theme.spacing(1),
  },
  chart: {
    height: 200, //310,
    padding: theme.spacing(2, 1)
  },
  grid: {
    height: 210, //320,
    padding: theme.spacing(2, 1)
  }
}));

const TherapistViewContainer = (props: any) => {
  const {
    type,
    subType, // therapists
    uid,
  } = props;

  const classes = useStyles();
  const dispatch = useDispatch();

  const userProfile = useSelector(
    (state) => _get(state, ["user", "profile"]) || {},
    shallowEqual
  );
  
  const activeTherapist = useSelector(
    (state) => _get(state, ["facilities", "activeTherapist"]) || {},
    shallowEqual
  );

  const therapistTitle:string = (activeTherapist.firstName || '') + ' ' + (activeTherapist.lastName || '');
  const patientListTitle:string = "Patients of " + therapistTitle;
  
  const data = useSelector(
    (state) => _get(state, ["facilities", "patients"]) || [],
    shallowEqual
  );
  const loading = useSelector(
    (state) => _get(state, ["facilities", "loading"]) || false,
    shallowEqual
  );
  const userReportUsage = useSelector(
    (state) => _get(state, ["facilities", "userReportUsage"]) || [],
    shallowEqual
  );
  const loadingUserReportUsage = useSelector(
    (state) => _get(state, ["facilities", "loadingUserReportUsage"]) || false,
    shallowEqual
  );

  const [openConfirmModal, setOpenConfirmModal] = useState(false);
  const [openInviteModal, setOpenInviteModal] = useState(false);
  const [facilitiesInEdit, setFacilitiesInEdit] = useState([] as any);
  const [sort, setSort] = useState([] as any);
  const [ modalUserName, setModalUserName ] = useState('');

  const userID = userProfile.uid;
  const showVid = localStorage.getItem("welcomeVideo"+userID);
  const videoID="dQLSV1dJqPI";
  //console.log("show video? =>"+showVid)
  var bShowVideo: boolean = true;
  if (showVid && showVid==='false') {
    bShowVideo = false;
  }

  const [ openQRModal, setOpenQRModal ] = useState(false);
  const [ qrString, setQRString ] = useState('');
  const [ qrFullName, setQRfullName ] = useState('');

  useEffect(() => {
    dispatch({
      type: FacilityActionType.GetFacilities,
      payload: {
        type: type,
        subType: subType,
        targetType: "activeTherapist",
        facilityUid: null,
        uid: uid,
        skip: 0,
        take: 0,
      },
    });

    loadUserReportUsage();

    refreshPatients();

    return () => {};
  }, []);

  const refreshPatients = () => {

    dispatch({
      type: FacilityActionType.GetFacilities,
      payload: {
        type: type,
        subType: subType,
        targetType: "patients",
        facilityUid: null,
        parentUid: uid,
        uid: null,
        skip: 0,
        take: 0,
      },
    });

  }

  const loadUserReportUsage = () => {
    dispatch({
      type: FacilityActionType.GetUserReportUsage,
      payload: {
        type: type,
        subType: subType,
        targetType: "therapist",
        uid: uid,
      },
    });
  }
  const renderUsageProgressChart = useMemo(() => {
    return (

      <UsageProgressChart
        reportUsage={userReportUsage}
        loadingUserReportUsage={loadingUserReportUsage}
      />
    );
  }, [userReportUsage, loadingUserReportUsage]);

  const setActiveFacility = (dataItem: any) => {
    const payload: any = getActiveFacilityPayload(subType, dataItem.uid);
    payload.activePatient = dataItem;
    dispatch({ type: FacilityActionType.SetActiveFacility, payload: payload });
  };

  const handleRowClick = (e: any) => {
    if (e.dataItem) {
      setActiveFacility(e.dataItem);
      navigate(
        `${Navigations.users.root}/${Navigations.users.patients}/${_get(
          e.dataItem,
          "uid"
        )}`,
        false
      );
    }
  };

  const handleEdit = (dataItem: any) => {
    if (dataItem) {
      setActiveFacility(dataItem);
      navigate(`/${type}/patients/edit`, false, { uid: dataItem.uid });
    } else {
      navigate(`/${type}/patients/new`);
    }
  };

  const handleDelete = (dataItem: any) => {
    setFacilitiesInEdit([...facilitiesInEdit, dataItem]);
    setModalUserName(dataItem.firstName+' '+dataItem.lastName);
    setOpenConfirmModal(true);
  };

  const handleDeleteOk = () => {
    dispatch({
      type: FacilityActionType.DeleteFacilities,
      payload: {
        type: type,
        subType: subType,
        targetType: "therapists",
        body: facilitiesInEdit,
      },
    });
    setOpenConfirmModal(false);
    //refreshPatients();
  };

  const handleDeleteCancel = () => {
    setFacilitiesInEdit([]);
    setOpenConfirmModal(false);
  };

  const handleInvite = (dataItem: any) => {
    setFacilitiesInEdit([...facilitiesInEdit, dataItem]);
    setModalUserName(dataItem.firstName+' '+dataItem.lastName);
    setOpenInviteModal(true);
  };

  const handleInviteOk = () => {
    dispatch({
      type: FacilityActionType.PostUserSendInvite,
      payload: {
        body: facilitiesInEdit,
      },
    });
    setOpenInviteModal(false);
  };

  const handleInviteCancel = () => {
    setFacilitiesInEdit([]);
    setOpenInviteModal(false);
  };

  const closeQR = () => {
    setOpenQRModal( false );
  };

  const handleQR = (dataItem: any) => {
    setFacilitiesInEdit([...facilitiesInEdit, dataItem]);
    setQRString(dataItem.qr);
    if (dataItem.lastName) {
      setQRfullName( dataItem.firstName + ' ' + dataItem.lastName.charAt(0) + '.' );
    } else {
      setQRfullName( dataItem.firstName );
    }
    setOpenQRModal(true);
  };

  return (
    <Page className={classes.root} title={`Therapist Dashboard`}>

      {
        bShowVideo && (
          <ModalVideo
            id='welcomeVideo'
            title='Welcome to Augment Therapy'
            videoID={videoID} //'-FAJk-IOBzM'
            userID={userID}
          >
          </ModalVideo>
        )
      }

      <Container maxWidth={false} className={classes.container}>

        <FacilitiesBreadCrumb
          type={type}
          subType={subType}
        />    
        
        {/* <Grid container direction="row" spacing={2}> */}
           
          <Grid item xs={12} >
            {/* <CategoryHeader title="14 day summary" subtitle="with trends" /> */}
            <StatsCards
              type={subType}
              uid={uid}
            />
          </Grid>
             

          <Grid item xs={12}>
            <Card
              data-testid="dashboard"
              className={clsx(classes.root)}
            >
              <CardContent className={classes.content}>
                {renderUsageProgressChart}
              </CardContent>
              </Card>
          </Grid>

          <Grid item xs={12} className={classes.content}>
            {loading && <CircularIndeterminate />}
            <Card>
            <Hidden mdDown>
              <StyledGrid
                style={{ height: "100%", overflow: "auto", cursor:'pointer' }}
                data={orderBy(data.data || [], sort)}
                sortable={{
                  mode: "multiple",
                }}
                sort={sort}
                onSortChange={(e) => {
                  setSort(e.sort);
                }}
                onRowClick={(e: any) => handleRowClick(e)}
              >
                <GridToolbar>
                  <CardHeader className={classes.cardHeader}
                    title={patientListTitle}
                    // subheader="click a patient name for details"
                  />
                  <Divider />
                  <br/>
                  <div>
                    <button
                      title="Add new"
                      className="k-button k-primary"
                      onClick={() => handleEdit(null)}
                    >
                      Add New Patient
                    </button>
                  </div>
                </GridToolbar>

                <GridColumn
                      title="Badge"
                      width="80"
                      headerClassName={classes.gridHeaderEdit}
                      cell={CellWithQR({userProfile: userProfile,  type:"badge", handleAction: handleQR})}
                />

                {gridConfig.columns.map((c: any, index: number) => {
                  return (
                    <GridColumn
                      key={`grid-${index}`}
                      {...c}
                    />
                  );
                })}

                <GridColumn
                  title="Invite"
                  width="80"
                  headerClassName={classes.gridHeaderEdit}
                  cell={CellWithEdit({userProfile: userProfile, type:"invite", handleAction: handleInvite})}
                />
                
                <GridColumn
                  title="Edit"
                  width="80"
                  headerClassName={classes.gridHeaderEdit}
                  cell={CellWithEdit({userProfile: userProfile,  type:"edit", handleAction: handleEdit})}
                />

                <GridColumn
                  title="Delete"
                  width="80"
                  headerClassName={classes.gridHeaderEdit}
                  cell={CellWithEdit({userProfile: userProfile,  type:"delete", handleAction: handleDelete})}
                />
              </StyledGrid>

              <div>
                    <button
                      title="Add new"
                      className="k-button k-primary"
                      onClick={() => handleEdit(null)}
                    >
                      Add New Patient
                    </button>
                  </div>

            </Hidden>

            <Hidden lgUp>
              <StyledGrid
                style={{ height: "100%", overflow: "auto", cursor:'pointer' }}
                data={orderBy(data.data || [], sort)}
                sortable={{
                  mode: "multiple",
                }}
                sort={sort}
                onSortChange={(e) => {
                  setSort(e.sort);
                }}
                onRowClick={(e: any) => handleRowClick(e)}
              >
                <GridToolbar>
                  <CardHeader className={classes.cardHeader}
                    title={patientListTitle}
                    // subheader="click a patient name for details"
                  />
                  {/* <Divider /> */}
                  <br/>
                  <div>
                    <button
                      title="Add new"
                      className="k-button k-primary"
                      onClick={() => handleEdit(null)}
                    >
                      Add New Patient
                    </button>
                  </div>
                </GridToolbar>

                <GridColumn
                      title="Badge"
                      width="80"
                      headerClassName={classes.gridHeaderEdit}
                      cell={CellWithQR({userProfile: userProfile,  type:"badge", handleAction: handleQR})}
                />

                {gridConfigBrief.columns.map((c: any, index: number) => {
                  return (
                    <GridColumn
                      key={`grid-${index}`}
                      {...c}
                    />
                  );
                })}

                <GridColumn
                  title="Actions"
                  width="140"
                  headerClassName={classes.gridHeaderEdit}
                  cell={CellWithComboMenu({
                    userProfile: userProfile,
                    handleActionInvite: handleInvite,
                    handleActionEdit: handleEdit,
                    handleActionDelete: handleDelete,
                  })}
                />
              </StyledGrid>
            </Hidden>

            <ConfirmModal
              title="Confirm Deletion"
              content={`Are you sure you want to delete ${modalUserName}?`}
              open={openConfirmModal}
              handleClose={handleDeleteCancel}
              handleOk={handleDeleteOk}
              handleCancel={handleDeleteCancel}
            />

            <ConfirmModal
              title="Confirm Invite"
              content={`Send ${modalUserName} an invitation to connect?`}
              open={openInviteModal}
              handleClose={handleInviteCancel}
              handleOk={handleInviteOk}
              handleCancel={handleInviteCancel}
            />

            { 
              (openQRModal) && (
                <UserQRCode
                  id="qrCode"
                  qrCodeString={qrString}
                  size={256}
                  userfullname={qrFullName}
                  open={true}
                  handleClose={closeQR}
                />
              )
            }
          </Card>
          </Grid>

          <Grid item xs={12} className={classes.content}>
            {loading && <CircularIndeterminate />}
            <Card>
            <Hidden mdDown>
              <StyledGrid
                style={{ height: "100%", overflow: "auto", cursor:'pointer' }}
                data={orderBy(data.data || [], sort)}
                sortable={{
                  mode: "multiple",
                }}
                sort={sort}
                onSortChange={(e) => {
                  setSort(e.sort);
                }}
                onRowClick={(e: any) => handleRowClick(e)}
              >
                <GridToolbar>
                  <CardHeader className={classes.cardHeader}
                    title={"Shared Patients of " + therapistTitle}
                    // subheader="click a patient name for details"
                  />
                  <Divider />
                  <br/>
                </GridToolbar>

                <GridColumn
                      title="Badge"
                      width="80"
                      headerClassName={classes.gridHeaderEdit}
                      cell={CellWithQR({userProfile: userProfile,  type:"badge", handleAction: handleQR})}
                />

                {gridConfig.columns.map((c: any, index: number) => {
                  return (
                    <GridColumn
                      key={`grid-${index}`}
                      {...c}
                    />
                  );
                })}

                <GridColumn
                  title="Invite"
                  width="80"
                  headerClassName={classes.gridHeaderEdit}
                  cell={CellWithEdit({userProfile: userProfile, type:"invite", handleAction: handleInvite})}
                />
                
                <GridColumn
                  title="Edit"
                  width="80"
                  headerClassName={classes.gridHeaderEdit}
                  cell={CellWithEdit({userProfile: userProfile,  type:"edit", handleAction: handleEdit})}
                />

                <GridColumn
                  title="Delete"
                  width="80"
                  headerClassName={classes.gridHeaderEdit}
                  cell={CellWithEdit({userProfile: userProfile,  type:"delete", handleAction: handleDelete})}
                />
              </StyledGrid>

            </Hidden>

            <Hidden lgUp>
              <StyledGrid
                style={{ height: "100%", overflow: "auto", cursor:'pointer' }}
                data={orderBy(data.data || [], sort)}
                sortable={{
                  mode: "multiple",
                }}
                sort={sort}
                onSortChange={(e) => {
                  setSort(e.sort);
                }}
                onRowClick={(e: any) => handleRowClick(e)}
              >
                <GridToolbar>
                  <CardHeader className={classes.cardHeader}
                    title={"Shared Patients of " + therapistTitle}
                    // subheader="click a patient name for details"
                  />
                  {/* <Divider /> */}
                  <br/>

                </GridToolbar>

                <GridColumn
                      title="Badge"
                      width="80"
                      headerClassName={classes.gridHeaderEdit}
                      cell={CellWithQR({userProfile: userProfile,  type:"badge", handleAction: handleQR})}
                />

                {gridConfigBrief.columns.map((c: any, index: number) => {
                  return (
                    <GridColumn
                      key={`grid-${index}`}
                      {...c}
                    />
                  );
                })}

                <GridColumn
                  title="Actions"
                  width="140"
                  headerClassName={classes.gridHeaderEdit}
                  cell={CellWithComboMenu({
                    userProfile: userProfile,
                    handleActionInvite: handleInvite,
                    handleActionEdit: handleEdit,
                    handleActionDelete: handleDelete,
                  })}
                />
              </StyledGrid>
            </Hidden>

            <ConfirmModal
              title="Confirm Deletion"
              content={`Are you sure you want to delete ${modalUserName}?`}
              open={openConfirmModal}
              handleClose={handleDeleteCancel}
              handleOk={handleDeleteOk}
              handleCancel={handleDeleteCancel}
            />

            <ConfirmModal
              title="Confirm Invite"
              content={`Send ${modalUserName} an invitation to connect?`}
              open={openInviteModal}
              handleClose={handleInviteCancel}
              handleOk={handleInviteOk}
              handleCancel={handleInviteCancel}
            />

            { 
              (openQRModal) && (
                <UserQRCode
                  id="qrCode"
                  qrCodeString={qrString}
                  size={256}
                  userfullname={qrFullName}
                  open={true}
                  handleClose={closeQR}
                />
              )
            }
          </Card>
          </Grid>
        {/* </Grid> */}
      </Container>
    </Page>
  );
};

export default TherapistViewContainer;