I was just facing this issue as well, According to https://github.com/chakra-ui/chakra-ui following is the syntax that is working

import { ChakraProvider, defaultSystem } from "@chakra-ui/react"

// Do this at the root of your application
function App({ children }) {
  return <ChakraProvider value={defaultSystem}>{children}</ChakraProvider>
}

apparently we have to import defaultSystem from chakra-ui & pass it to ChakraProvider

https://github.com/chakra-ui/chakra-ui?tab=readme-ov-file#usage