Dropdown: filter options doesn't get value when using the component in a modal

[mahyaasadi]

Describe the bug

in a Next JS project, when I use the Dropdown component on a page, the filter feature gets the value and filters the options correctly but when using it in a modal, when I try to type in a value in the filter input the value property won't change.

the modal that I am using is react-bootstrap.
I checked the style of filter input on both occasions and they have no difference, changing the z-index of the modal didn't solve the issue either.

here is my full modal:

import { Modal } from "react-bootstrap";
import { Dropdown } from "primereact/dropdown";

const WarehouseReceptionModal = ({
  show,
  onHide,
  ....
}) => {
  return (
    <>
      <Modal show={show} onHide={onHide} centered size="lg">
        <Modal.Header>
          <Modal.Title> title </Modal.Title>
        </Modal.Header>

        <Modal.Body>
          <form
            onSubmit={submitWarehouseItem}
          >
                  <label className="lblAbs font-12">انتخاب کالا</label>
                  <Dropdown
                    value={selectedWItem}
                    onChange={(e) => FUSelectWItem(e.target.value)}
                    options={warehouseItemsData}
                    optionLabel="Name"
                    placeholder="انتخاب کنید"
                    filter
                    showClear
                  />

            <div className="submit-section">
              <button
                type="submit"
                className="btn btn-primary rounded btn-save font-13"
              >
              submit
              </button>
            </div>
          </form>
        </Modal.Body>
      </Modal>
    </>
  );
};

export default WarehouseReceptionModal;

PrimeReact version

10.0.7

React version

18.x

Language

ES6

Build / Runtime

Next.js