diff --git a/assets/index.less b/assets/index.less
index b4acb9a..2f98d75 100644
--- a/assets/index.less
+++ b/assets/index.less
@@ -152,10 +152,13 @@
 
   // Preset
   &-presets {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    background: #CCCCFF;
+    background: #ccccff;
+
+    ul {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
   }
 
   &-footer,
diff --git a/src/PresetPanel.tsx b/src/PresetPanel.tsx
index 4c07439..83ae2c0 100644
--- a/src/PresetPanel.tsx
+++ b/src/PresetPanel.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import type { PresetDate } from './interface';
 
 export interface PresetPanelProps<T> {
@@ -16,23 +15,25 @@ export default function PresetPanel<T>(props: PresetPanelProps<T>) {
   }
 
   return (
-    <ul className={`${prefixCls}-presets`}>
-      {presets.map(({ label, value }, index) => (
-        <li
-          key={index}
-          onClick={() => {
-            onClick(value);
-          }}
-          onMouseEnter={() => {
-            onHover?.(value);
-          }}
-          onMouseLeave={() => {
-            onHover?.(null);
-          }}
-        >
-          {label}
-        </li>
-      ))}
-    </ul>
+    <div className={`${prefixCls}-presets`}>
+      <ul>
+        {presets.map(({ label, value }, index) => (
+          <li
+            key={index}
+            onClick={() => {
+              onClick(value);
+            }}
+            onMouseEnter={() => {
+              onHover?.(value);
+            }}
+            onMouseLeave={() => {
+              onHover?.(null);
+            }}
+          >
+            {label}
+          </li>
+        ))}
+      </ul>
+    </div>
   );
 }