I am using chakraUI in my react project and I am getting the following error:

chakra-ui-checkbox.esm.js:146 
        
       Uncaught TypeError: framer_motion__WEBPACK_IMPORTED_MODULE_5__.motion.custom is not a function
    at Module../node_modules/@chakra-ui/checkbox/dist/chakra-ui-checkbox.esm.js (chakra-ui-checkbox.esm.js:146:1)
    at Module.options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at Module../node_modules/@chakra-ui/react/dist/chakra-ui-react.esm.js (chakra-ui-react-utils.esm.js:91:1)
    at Module.options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at Module../src/App.js (bundle.js:18:74)
    at Module.options.factory (react refresh:6:1)

Here is how I used this in my app.js file

import Navbar from "./components/navbar/navbar";
import { useState } from "react";
import { ChakraProvider } from "@chakra-ui/react";
import theme from "./theme";
function App() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  return (
    <div>
      <ChakraProvider>
        <Navbar isMenuOpen={isMenuOpen} setIsMenuOpen={setIsMenuOpen} />
      </ChakraProvider>
    </div>
  );
}

export default App;

Here is my package.json file

"dependencies": {
    "@chakra-ui/react": "^1.8.7",
    "@emotion/react": "^11.8.2",
    "@emotion/styled": "^11.8.1",
    "@testing-library/jest-dom": "^5.16.3",
    "@testing-library/react": "^12.1.4",
    "@testing-library/user-event": "^13.5.0",
    "framer-motion": "^6.2.8",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.4"
  },

Here is one of the solution for it but I thought this issue was fixed. So what is the issue with my code. Can someone please help?