diff --git a/packages/.eslintrc b/packages/.eslintrc
index 9fcb1c9..a6ab75d 100644
--- a/packages/.eslintrc
+++ b/packages/.eslintrc
@@ -2,7 +2,8 @@
     "parser": "@babel/eslint-parser",
     "root": true,
     "extends": [
-        "eslint:recommended"
+        "eslint:recommended",
+        "plugin:react-hooks/recommended"
     ],
     "settings": {
         "react": {
@@ -72,7 +73,8 @@
                 "eslint:recommended",
                 "plugin:react/recommended",
                 "plugin:@typescript-eslint/eslint-recommended",
-                "plugin:@typescript-eslint/recommended"
+                "plugin:@typescript-eslint/recommended",
+                "plugin:react-hooks/recommended"
             ],
             "globals": {
                 "process": true
diff --git a/packages/jest.config.ts b/packages/jest.config.ts
index 78445fe..522af3f 100644
--- a/packages/jest.config.ts
+++ b/packages/jest.config.ts
@@ -2,7 +2,7 @@ import type { Config } from '@jest/types'
 
 const packages: string[] = ['material-color', 'material-colorful']
 
-const testMatchesLint: string[] = []
+const testMatchesLint: string[] = ['material-color', 'material-colorful']
 
 packages.forEach(pkg => {
     testMatchesLint.push(...[
@@ -19,6 +19,7 @@ const base: Partial<Config.InitialOptions> = {
     },*/
     moduleNameMapper: {
         '^@ui-schema/material-color(.*)$': '<rootDir>/material-color/src$1',
+        '^@ui-schema/material-colorful(.*)$': '<rootDir>/material-colorful/src$1',
     },
     moduleFileExtensions: [
         'ts',
diff --git a/packages/material-colorful/package.json b/packages/material-colorful/package.json
index be9eafa..d150ce4 100644
--- a/packages/material-colorful/package.json
+++ b/packages/material-colorful/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@ui-schema/material-colorful",
-    "version": "0.0.1",
+    "version": "0.0.2",
     "description": "React color pickers as MUI widgets for UI-Schema - using react-colorful.",
     "homepage": "https://ui-schema.bemit.codes/docs/material-color/material-color",
     "author": {
diff --git a/packages/material-colorful/src/WidgetColorful/WidgetColorful.tsx b/packages/material-colorful/src/WidgetColorful/WidgetColorful.tsx
index b43da12..dd5868f 100644
--- a/packages/material-colorful/src/WidgetColorful/WidgetColorful.tsx
+++ b/packages/material-colorful/src/WidgetColorful/WidgetColorful.tsx
@@ -44,7 +44,7 @@ export const WidgetColorful = <T extends AnyColor, P extends WidgetProps = Widge
         borderColor: valid ? palette.divider : palette.error.main,
         width: pickerWidth || '100%',
         height: pickerHeight,
-    }), [palette, pickerWidth, pickerHeight])
+    }), [palette, pickerWidth, pickerHeight, valid])
 
     const showValueText = schema?.getIn(['view', 'showValueText']) as boolean
     return <>