I am trying to add react-resizable library, to add resizable column functionality

Question

I tried to add resizable column in react-bootstrap-table-next but it is not working. I am using react-beautiful library as well because I want drag and drop of the columns as well but after that I am unable to do column resizing.

import React, { useState, useEffect } from "react"; 
import BootstrapTable from "react-bootstrap-table-next";
import { roleUser } from "../../../utils/AuxIP/helper"; 
import { v4 as uuidv4 } from "uuid";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";

const PreviousTable = (props) => {
  console.log(props.content.instruction_list);

  const statusOfInstruction = [
    { value: "pending", label: "Pending" },
    { value: "awaiting instruction", label: "Awaiting Instruction" },
    { value: "abandoned", label: "Abandoned" },
    { value: "done", label: "Done" },
    { value: "cancel", label: "Cancel" },
  ];

  const previousColumns = [
    {
      dataField: "user_name",
      text: "Name",
      sort: false,
    },
    {
      dataField: "user_email",
      text: "Email",
      sort: false,
    },
    
  ];

  // Add a state to keep track of the table columns
  // Retrieve the column order from local storage or use previousColumns as default
  const [columns, setColumns] = useState(() => {
    const storedColumns = localStorage.getItem("previousColumnOrder");
    return storedColumns ? JSON.parse(storedColumns) : previousColumns;
  });

  const formatDates = (data) => {
    return data.map((row) => {
      const formattedRow = { ...row };
      formattedRow.application_filing_date = moment(
        row.application_filing_date
      ).format("ll");
      formattedRow.grant_date = moment(row.grant_date).format("ll");
      formattedRow.due_date = moment(row.due_date).format("ll");
      formattedRow.last_instruction_date = moment(
        row.last_instruction_date
      ).format("ll");
      return formattedRow;
    });
  };

const formattedData = formatDates(props?.content?.instruction_list?.data);

  

  return (
    <>
      <div className="previous--table">
        <DragDropContext onDragEnd={handleDragEnd}>
          <div>
            <Droppable droppableId="columns" direction="horizontal">
              {(provided) => (
                <div
                  ref={provided.innerRef}
                  {...provided.droppableProps}
                  className=""
                  style={{
                    width: " 1094px",
                    display: "flex",
                    overflowX: "auto",
                    position: "relative",
                    zIndex: "0",
                  }}
                >
                  {columns.map((column, index) => (
                    <Draggable
                      draggableId={column.dataField}
                      index={index}
                      key={column.dataField}
                    >
                      {(provided) => (
                        <div
                          ref={provided.innerRef}
                          {...provided.draggableProps}
                          {...provided.dragHandleProps}
                        >
                          <BootstrapTable
                            bootstrap4
                            keyField={uuidv4()}
                            data={formattedData || []}
                            columns={[column]}
                            filter={filterFactory()}
                            noDataIndication="No Data to Display"
                            headerClasses="header-class"
                            wrapperClasses="table-striped previous--table overflow-auto"
                          />
                        </div>
                      )}
                    </Draggable>
                  ))}
                  {provided.placeholder}
                </div>
              )}
            </Droppable>
          </div>
        
        </DragDropContext>
      </div>
    </>
  );
};

export default PreviousTable;