Jquery UI sortable addon with React not working

Question

I'm trying to use Jquery UI (sortable) in my React Project. I have installed jQuery & jquery-ui using NPM and writing it in useEffect but I get this error when I run my project.

Uncaught ReferenceError: jQuery is not defined
    jQuery 2
        <anonymous>
        <anonymous>
sortable.js:35:11

I checked node modules/jquery-ui/ui/widgets/sortable but I don't know if the error is in the package or my code

Below is the snippet of component in which I'm using jQuery

import $ from "jquery";
import "jquery-ui/ui/widgets/sortable";
import { useEffect } from "react";

const DesktopLayout = () => {
  useEffect(() => {
    $(
      "#Dsortable1, #Dsortable2, #Dsortable3, #Dsortable4, #Dsortable5, #Dsortable6"
    )
      .sortable({
        connectWith: ".connectedSortable",
        placeholder: "ui-state-highlight",
      })
      .disableSelection();
  }, []);