how to properly destroy and reinitialize a datatable?

Description of problem:
i am having problem destroying and re-initializing a datatable. i have created a generic datatable component in react to be used on different tables. but the problem is that when the data in the table changes then the changes are not seen properly on the table. for example after deleting an item from table, the item still can be seen in the table. and after deleting and adding an item to the table the page crashes with an error. all of this problem is the datatable is not properly being destroyed or being re-initialized properly. i have used options like .destory(), destroy: true and retrieve: true but these options seem not to be working properly. Here is the code for the MasterDataTable component:

import React, { useEffect, useRef, useState } from 'react';
import $ from 'jquery';
// import 'bootstrap/dist/css/bootstrap.min.css';
import 'jquery/dist/jquery.min';
import "datatables.net-dt/js/dataTables.dataTables";
import "datatables.net-dt/css/dataTables.dataTables.min.css";
import "datatables.net-buttons/js/buttons.colVis";
import "datatables.net-buttons/js/buttons.html5";
import "datatables.net-buttons/js/buttons.print";
import "datatables.net-buttons/js/dataTables.buttons";
// import 'jszip';
import JSZip from 'jszip'; 
import 'pdfmake';
// import 'pdfmake/build/pdfmake';
// import 'pdfmake/build/vfs_fonts';
import pdfMake from "pdfmake/build/pdfmake";
import pdfFonts from "pdfmake/build/vfs_fonts";
import DataTable from 'datatables.net-buttons-dt';

window.JSZip = JSZip;
pdfMake.vfs = pdfFonts.pdfMake.vfs;


const MasterDataTable = (prop) => {
  const { tableId, tableData } = prop
  const dataTableRef = useRef(null);

  useEffect(() => {

         if ($.fn.DataTable.isDataTable(`#${tableId}`)) {
          $(`#${tableId}`).DataTable().destroy();
          console.log("destroyed")
         }
        if(tableData?.length > 0){
        dataTableRef.current =  new DataTable(`#${tableId}`, {
            pagingType: 'full_numbers',
            pageLength: 10,
            processing: true,
            responsive: true,
            destroy: true,
            retrieve: true,
            dom: 'Bfrtip',
            orientation: tableData[0] && tableData[0].length > 4 ? 'landscape' : 'portrait', // Set orientation based on column count
            pageSize: tableData[0] && tableData[0].length > 4 ? 'A3' : 'A4', // Adjust page size based on the number of columns
            buttons: [
                {
                    extend: 'copyHtml5',
                    exportOptions: {
                      columns: ':visible', 
                      modifier: {
                        page: 'all'
                      },
                      format: {
                          body: (data, row, column, node) => {
                          // Dynamically handle the Status column
                              if ($(node).closest('td').hasClass('status-column')) {
                              return $(data).find('input').is(':checked') ? 'True' : 'False';
                              }
                              return $(node).text().trim();
                          }
                      },
                      stripHtml: true,
                    },                  
                },
                {
                extend: 'csvHtml5',
                exportOptions: {
                    columns: ':visible',     
                    modifier: {
                    page: 'all'
                    },
                    format: {
                      body: (data, row, column, node) => {
                      // Dynamically handle the Status column
                        if ($(node).closest('td').hasClass('status-column')) {
                        return $(data).find('input').is(':checked') ? 'True' : 'False';
                        }
                        return $(node).text().trim();
                      }
                    },
                    stripHtml: true,
                }
                },
                {
                  extend: 'excelHtml5',
                  exportOptions: {
                    columns: ':visible',
                    modifier: {
                      page: 'all'
                    },
                    format: {
                      body: (data, row, column, node) => {
                      // Dynamically handle the Status column
                        if ($(node).closest('td').hasClass('status-column')) {
                        return $(data).find('input').is(':checked') ? 'True' : 'False';
                        }
                        return $(node).text().trim();
                      }
                    },
                    stripHtml: true,
                  }
                },
                {
                  extend: 'pdf',
                  exportOptions: {
                    columns: ':visible', 
                    stripHtml: false,
                    modifier: {
                      page: 'all'
                    }
                  }
                },
                {
                    extend: 'print',
                    exportOptions: {
                      columns: ':visible', 
                      stripHtml: false,
                      modifier: {
                        page: 'all'
                      }
                    }
                  },
                'colvis',

              ],
              initComplete: ()=> {
                // $(`#${tableId}`).addClass('table table-bordered table-hover toggle-circle custom-table table');
            }
            });
            console.log(`DataTable with ID #${tableId} initialized.`);

    }

  }, [tableId, tableData]);


//   return null; // No need to render anything
};

export default MasterDataTable;