Import excel file in react18

[Punit]

Import excel file is not working Pqgrid in react 18 :
Error :  Cannot read properties of undefined (reading 'importXl')

 React Code :

 const gridRefImport = useRef(null);

  const handleFileUpload = (evt) => {
    const file = evt.target.files[0]; // Get file
    if (file && file.name.toUpperCase().endsWith(".XLSX")) {
     const grid = $(gridRefImport.current).pqGrid("instance");

      grid.showLoading();
      console.log(grid, "grid excel")
      if (grid.excel) {
        grid.excel.importXl({
          file: file,
          sheets:

        }, function (wb) {
          grid.importWb({
            workbook: wb,
            extraRows: 1000,
            extraCols: 1000
          });
          grid.hideLoading();
        });
      } else {
        console.error("Excel module not loaded!");
      }
    }
  };

useEffect(() => {
    if (gridRefImport.current) {
      const $grid = $(gridRefImport.current);

      const grid = $grid.pqGrid({
        excel: true,
        keepCM: true,
        width: "auto",
        height: 400,
        showTitle: false,
        mergeModel: { flex: true },
        numberCell: { width: 60 },
        sortModel: { on: false },
        selectionModel: { column: true },
        stripeRows: false,
        menuIcon: true,
        filterModel: { hideRows: true },
        columnTemplate: {
          filter: {
            crules: [{ condition: "range" }],
          },
        },
        animModel: { on: true },
        autoRow: true,
        editor: { type: "textarea" },
        editModel: {
          onSave: "downFocus",
        },
      });

      return () => {
        // Cleanup on unmount
        grid.pqGrid("destroy");
      };
    }
  }, []);

 <div ref={gridRefImport}  style={{ paddingBottom: "3px" }}  className="border"></div>