Css – trying to remove the appearance border inside my input ReactJS & Tailwind

I am trying to remove the appearance border inside my input. But I am unable to remove it. Someone please guide me how can I remove it? I am using TailwindCSS and React JS.

You can see an inner border in the picture attached

This is the link to codesandbox: (Codesandbox)

My code:

import * as React from "react";
import { useState, ChangeEvent } from "react";


export default function App() {
  const [selectedColor, setSelectedColor] = useState("#1C4B40");

  const handleColorChange = (event: ChangeEvent<HTMLInputElement>) => {
    let inputValue = event.target.value;
    if (!inputValue.startsWith("#")) {
      inputValue = `#${inputValue}`;
    }
    setSelectedColor(inputValue);
  };

  return (
    <div className="bg-gray-500">
      <input
        id="colorPicker"
        type="color"
        style={{
          WebkitAppearance: "none",
          appearance: "none",
          backgroundColor: selectedColor,
          borderColor: selectedColor,
          outline: "none"
        }}
        className="h-8 w-8 cursor-pointer rounded-[4px] border-none"
        value={selectedColor}
        onChange={handleColorChange}
      />
    </div>
  );
}

Image

I am trying to remove the inner grey border from the input. I want to achieve it using tailwind

enter image description here