Can not override theme of Chakra UI in NUXT js using extendTheme

Question

I am unable to extendTheme in Chakra UI in my NUXT JS app. I want to use my own breakpoints as per my designs, which means that I need to have more than 4 breakpoints in my app.

In my nuxt.config.js I am importing it and using like below :

import customTheme from './customTheme/custom-theme.js'

chakra: {
  extendTheme : customTheme
},

The file custom-theme.js

console.log("LOADING CUSTOM THEME")
export default {
  // '38rem', '48rem', '62rem', '80rem',
  breakpoints:[ '89rem','86rem','90rem','120rem','200rem','300rem'],
  colors:{
    mpw:{
      50:"#EBEBEB",
    }
  }
}

When I do console.log in my index.vue

mounted() {
  if(process.server){
    console.log("ON SERVER")
    console.log(this)
  }

  if(process.client){
    console.log("ON CLIENT")
    console.dir(this.$chakra.theme)      
  }

},

then I don't see my custom breakpoints

How can I add my own set of breakpoints like those breakpoints:['89rem', '86rem', '90rem', '120rem', '200rem', '300rem'] ?