'DELETE' 'Title' does not delete the 'title' row 'sub-title, count'; but shows 'title' row again with the 'totalcount' - ReactJS

I have a table which contains Title, Sub-Title and TotalCount. sub-title is the child of title. So, in the collection of title, objectId of sub-title is saved in the database. Below is the screenshot of the table.

Title contains Kilo , Test and Grams with it's respective sub-title and totalcount

What happens is, suppose I delete row Title with Test. Once hit delete, I should get records that are Kilo and Grams. But I don't get that. In fact, I get row with Test with deleted sub-title as blank and the totalcount which adds up all the previous count and displays 4.

The same problem arises when I delete Title Grams.

Below is the code related to the issue

mainPage.js

import React,{ Component } from 'react';
import { connect } from 'react-redux';
import Grid from '@material-ui/core/Grid';
import TabPanel from '../../utils/TabPanel';
import { mainStructure, deleteDbData } from './actions';
import TitleSubtitleTable from './titlesubtitletable';

class MainPage extends Component {
  constructor() {
    super();
    this.state = { filter: {} };
  }

  componentDidMount() {
    this.getData();
  }
  getData = async () => {
    let data = {
      data: {
        title:
          this.state.filter && this.state.filter.title
            ? this.filter.title
            : null,
        subtitle:
          this.state.filter && this.state.filter.subtitle
            ? this.state.filter.subtitle
            : null,
      },
    };
    await this.props.mainStructure(data);
  };
  deleteData = async (title) => {
    let payload = {
      type: title.type,
      id: title._id,
    };
    await this.props.deleteDbData(payload);
    await this.getData();
  };
  render() {
    return (
      <div>
        <Grid>
          <TabPanel>
            {this.props.structure.tablestructure.data ? (
              <TitleSubtitleTable
                records={this.props.structure.tablestructure.data}
                totalCount={this.props.structure.tablestructure.totalCount}
                handleDelete={this.deleteData}
              />
            ) : null}
          </TabPanel>
        </Grid>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    structure: state.structure,
  };
};
export default connect(mapStateToProps, { mainStructure, deleteDbData })(
  MainPage
);

Below is code for titlesubtitletable.js

import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import DeleteIcon from '@material-ui/icons/Delete';
import Avatar from '@material-ui/core/Avatar';
import IconButton from '@material-ui/core/IconButton';
const columns = [
  { id: 'title', label: 'Title' },
  { id: 'delete', label: '' },
  { id: 'subtitle', label: 'Sub-Title' },
  { id: 'count', label: 'Total Count' },
];

function EnhancedTableTitle() {
  return (
    <TableHead>
      <TableRow>
        {columns.map((titleCell) => (
          <TableCell key={titleCell.id}> {titleCell.label} </TableCell>
        ))}
      </TableRow>
    </TableHead>
  );
}
export default function EnhancedTable(props) {
  return (
    <div>
      <TableContainer>
        <Table>
          <EnhancedTableTitle />
          <TableBody>
            {props.records.map((row, index) => {
              return row.children.length > 0 ? (
                row.children.map((title) => (
                  <TableRow key={index}>
                    <TableCell> {row.name} </TableCell>
                    <TableCell>
                      <IconButton onClick={() => props.handleDelete(row)}>
                        <Avatar>
                          <DeleteIcon color='action' />
                        </Avatar>
                      </IconButton>
                    </TableCell>
                    <TableCell align='left' className={classes.tableCellSmall}>
                      {title.name}
                    </TableCell>
                    <TableCell align='left' className={classes.tableCellSmall}>
                      <IconButton onClick={() => props.handleDelete(title)}>
                        <Avatar>
                          <DeleteIcon color='action' />
                        </Avatar>
                      </IconButton>
                    </TableCell>
                    <TableCell>{title.count}</TableCell>
                  </TableRow>
                ))
              ) : (
                <TableRow key={index}>
                  <TableCell>{row.name} </TableCell>
                  <TableCell>
                    <IconButton onClick={() => props.handleDelete(row)}>
                      <Avatar>
                        <DeleteIcon color='action' />
                      </Avatar>
                    </IconButton>
                  </TableCell>
                  <TableCell></TableCell>
                  <TableCell></TableCell>
                  <TableCell>{row.count}</TableCell>
                </TableRow>
              );
            })}
          </TableBody>
        </Table>
      </TableContainer>
    </div>
  );
}

Brief Explanation: I do not want the deleted record to be seen again when I try to delete Title. If 3 different titles, and delete one title, the result should be 2 titles and not the 3 which adds up and shows totalcount

I don't know where I am going wrong. Really need help to figure out the problem. Thank you!!