Datatables filter not working with html in the columns

@Konrad Stępień, this solved my issue but not working with select boxes in the column. Any help on that would be appreciated

@Konrad Stępień here is my code. Search and sort are not working for the components of ChangeStatus and AssignInspections

orders.js

export const Inspections = props => {
    let data = [];
    let rows = [];
    const userContextData   =   useContext(UserContext)
    const header = [
        {},
        {label: "Address", field: "address"},
        {label: "City", field: "city"},
        {label: "State", field: "state"},
        {label: "Type", field: "type"},
        {label: "Bank", field: "bank"},
        {
            label: "Client Name",
            field: "clientName"
        },
        {
            label: "Date Ordered",
            field: "dateOrdered"
        },

        {
            label:
                Path.urlRoute() === "my_inspections"
                    ? "Inspection Date"
                    : "Inspection Date",
            field:
                Path.urlRoute() === "my_inspections"
                    ? "inspectionDateAssign"
                    : "inspectionDate"
        }
    ];

    if (Path.urlRoute() === "inspections")
        header[header.length] = {
            label: "Assign",
            field: "assignInspection"
        };

    header[0] = {
        label: Path.urlRoute() === "my_inspections" ? "Status" : "Status",
        field: Path.urlRoute() === "my_inspections" ? "changeStatus" : "status",

    };

    const renderInspectors = order_id  => {
        const ele = document.getElementById('inspector'+order_id.target.id)
        const current   =   order_id.target;

        current.style= {display: 'none'}
        ele.style= {display:"block"}
    }
    if (props.inspections) {
        for (let index in props.inspections) {
            const row = props.inspections[index];
            let status = row.order_status;
            if (row.order_status === 'accepted') {
                status = 'Pending';
            }

            rows.push({
                address: <NavLink to={`/inspections/${row.id}`} searchvalue={row.address}>{row.address}</NavLink>,
                city: row.city,
                state: row.state,
                type: row.type,
                bank: (
                    <NavLink to={`/banks/${row.bank_id}`} className="my-0" searchvalue={row.bank_name}>
                        {row.bank_name}
                    </NavLink>
                ),
                clientName: (
                    <NavLink to={`/clients/${row.user_id}`} searchvalue={row.client_name}>{row.client_name}</NavLink>
                ),
                status: (

                    <span className={`badge text-white ${statusColorCodes[row.order_status]}`} searchvalue={status}>
                      {String.capitalizeFirstLetter(status)}
                    </span>
                ),
                dateOrdered: props.inspections[index].created_at,
                assignInspection: (
                        <div searchvalue={row.inspector_name}>
                            {
                                (JSON.parse(userContextData.user).role === 'Senior Inspector')?<span onClick={renderInspectors} id={row.id}>{row.inspector_name}</span> : ''
                            }

                            <AssignInspection
                                inspectors={props.inspectors}
                                orderID={row.id}
                                assignee={row.assignee}
                            />
                        </div>


                ),
                changeStatus: <div searchvalue={status}><ChangeStatus status={row.order_status} order={row.id}/></div>,
                inspectionDateAssign: (
                    <InspectionDate order={row.id} inspectionDate={row.inspection_date}/>
                ),
                inspectionDate: row.inspection_date
            });
        }
    } else {
        rows = {};
    }

    if (rows) {
        // console.log(rows);
        data = {
            columns: header,
            rows: rows
        };
    }

    return (
        <div className="block block-rounded p-3">
            <MDBDataTable
                striped={true}
                small={true}
                barReverse={true}
                data={data}
                entries={50}
                entriesOptions={[20, 30, 50, 100]}
                searching={true}
                noBottomColumns={true}
                sortRows={['address', 'bank', 'clientName', 'status', 'changeStatus', 'assignInspection']}
            />
        </div>
    );
};

ChangeStatus.js

export const ChangeStatus = props => {
  const userContextData = useContext(UserContext);
  const [status, setStatus] = useState(props.status);
  console.info(props)
  const changeStatus = (status, order) => {
    InspectionsService.setInspectionStatus(userContextData.accessToken, {
      order,
      status
    })
      .then(response => {
        console.log(response);
        setStatus(response.status);
      })
      .catch(error => console.log(error));
  };
  let statuses = {
    pending: "Pending",
    scheduled: "Scheduled",
    delayed: "Delayed",
    inspected: "Inspected",
    review: "Review",
    approved: "Approved"
  };

  statuses = Object.keys(statuses).map(function(key, index) {
    return (
      <Dropdown.Item key={index} onClick={e => changeStatus(key, props.order)}>
        {statuses[key]}
      </Dropdown.Item>
    );
    // statuses[key] *= 2;
  });


  return (
    <Dropdown>
      <Dropdown.Toggle
        variant="success"
        id="dropdown-basic"
        className={`badge border-0 ${statusColorCodes[status]}`}
      >
        {String.capitalizeFirstLetter(status)}
      </Dropdown.Toggle>
      <Dropdown.Menu>{statuses}</Dropdown.Menu>
    </Dropdown>
  );
};

AssignInspections.js

export const AssignInspection = props => {
  const userContextData = useContext(UserContext);
  const [assignee, setAssignee] = useState("");
  const [isAssigned, setIsAssigned] = useState(false);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    setAssignee(`{"assignee":"${props.assignee}","order":"${props.orderID}"}`);
    if (props.assignee) setIsAssigned(true);
  }, []);
  let inspectors = "";
  if (props.inspectors && props.orderID) {
    inspectors = props.inspectors.map(inspector => {
      return (
        <option
          value={`{"assignee":"${inspector.id}","order":"${props.orderID}"}`}
          key={inspector.id}
        >
          {inspector.name}
        </option>
      );
    });
  }

  const onInspectorSelect = e => {
    setIsLoading(true);
    setAssignee(e.target.value);
    if (e.target.value) {
      InspectionsService.assignInspection(
        userContextData.accessToken,
        JSON.parse(e.target.value)
      )
        .then(response => setIsLoading(false))
        .catch(error => console.log(error));
    }
  };

  const assignToSelf = e => {
    setIsLoading(true);
    const payload = {
      assignee: JSON.parse(userContextData.user).id,
      order: props.orderID
    };

    InspectionsService.assignInspection(userContextData.accessToken, payload)
      .then(response => {
        setIsLoading(false);
        setIsAssigned(true);
      })
      .catch(error => console.log(error));
  };

  const unassignToSelf = e => {
    setIsLoading(true);
    const payload = {
      assignee: "",
      order: props.orderID
    };

    InspectionsService.assignInspection(userContextData.accessToken, payload)
      .then(response => {
        setIsLoading(false);
        setIsAssigned(false);
      })
      .catch(error => console.log(error));
  };

  if (isLoading) {
    return <BarLoader />;
  } else {
    return (
      <>
        {JSON.parse(userContextData.user).role === "Senior Inspector" ? (
          <select
            onChange={onInspectorSelect}
            className="form-control form-control-sm m-0  p-0"
            style={{ fontSize: "0.75rem", height: "auto", display: 'none' }}
            value={assignee}
            id={`inspector`+props.orderID}

          >
            <option value={`{"assignee":"","order":"${props.orderID}"}`}>
              ----
            </option>
            {inspectors}
          </select>
        ) : (
          <>
            {isAssigned ? (
              <button
                className="btn btn-sm btn-danger"
                onClick={unassignToSelf}
              >
                <i className="fa fa-user-alt-slash"></i>
              </button>
            ) : (
              <button className="btn btn-sm btn-success" onClick={assignToSelf}>
                <i className="fa fa-user-tag"></i>
              </button>
            )}
          </>
        )}
      </>
    );
  }
};

I have the same issue if any one fide solution plz share