Mui v5 DataGrid custom filter lost focus

Question

I added a custom filter in the datagrid to add a predefined value to the filters, the issue is when I try to select a value, the panel filter closes immediately after the menu is mounted. the issue video here

I used the same example in mui v5 but I faced the issue. ex

function VisibilityValue(props) {
  const { item, applyValue, focusElementRef } = props;

  const ratingRef = React.useRef(null);
  React.useImperativeHandle(focusElementRef, () => ({
    focus: () => {
      ratingRef.current
        .querySelector(`input[value="${item.value || ""}"]`)
        .focus();
    },
  }));

  return (
    <Select
      label='visibility'
      ref={ratingRef}>
      <MenuItem value='public'>Public</MenuItem>
      <MenuItem value='private'>Private</MenuItem>
    </Select>
  );
}

This is to custom the operator:

 const visibilityOperators = [
    {
      label: "=",
      value: "equal",
      getApplyFilterFn: (filterItem) => {
        if (
          !filterItem.columnField ||
          !filterItem.value ||
          !filterItem.operatorValue
        ) {
          return null;
        }

        return (params) => {
          return params.value === filterItem.value;
        };
      },
      InputComponent: VisibilityValue,
      InputComponentProps: { type: "string" },
    },
  ];

DataGrid column:

{
      field: "visibility",
      headerName: i18n.t("mom.res_confidentiality", "Confidentiality"),
      flex: 1,
      align: "center",
      headerAlign: "center",
      filterOperators: visibilityOperators,
    },