Prop type warning for typography

[YuAnWu0000]

I've added my custom colors : 'primary', 'scondary', 'success', 'error', 'info', 'warning' in the theme object.

const theme = {
  typography: {
    defaultProps: {
      variant: 'paragraph',
      color: 'primary',
      textGradient: false,
      className: ''
    },
    valid: {
      variants: [
        'h1',
        'h2',
        'h3',
        'h4',
        'h5',
        'h6',
        'lead',
        'paragraph',
        'small'
      ],
      colors: ['primary', 'scondary', 'success', 'error', 'info', 'warning']
    },
    styles: {
      variants: {
        h1: {
          display: 'block',
          fontSmoothing: 'antialiased',
          letterSpacing: 'tracking-normal',
          fontFamily: 'font-sans',
          fontSize: 'text-5xl',
          fontWeight: 'font-bold',
          lineHeight: 'leading-tight'
        }
      },
      colors: {
        primary: {
          color: 'text-primary'
        },
        secondary: {
          color: 'text-secondary'
        },
        success: {
          color: 'text-success'
        },
        error: {
          color: 'text-error'
        },
        info: {
          color: 'text-info'
        },
        warning: {
          color: 'text-warning'
        }
      }
    }
  }
}

And provided it as follows

const root = ReactDOM.createRoot(document.getElementById('root'))

root.render(
  // strict mode will render your component twice in dev env
  // <React.StrictMode>
  <ThemeProvider value={theme}>
    <App />
  </ThemeProvider>
  // </React.StrictMode>
)

It still came out with warnings like this...

What can I do to avoid the prop type warnings?
(btw, I am using the javascript, not typescript)