I am trying to remove this blue border that show up when i click or focus within the input part in react-select.

I used

    control: (provided: any) => ({
      ...provided,
      background: "transparent",
      display: "flex",
      flexWrap: "nowrap",
      border: "none",
      "&:focus": {
        border: "none !important",
      },
      "&:select": {
        border: "none",
      },
      "&:hover": {
        border: "none",
      },
    }),

    menu: (provided) => ({
      ...provided,
      border: "none",
      boxShadow: "none",
    }),
    option: (provided) => ({
      ...provided,
      border: "none",
    }),
  };

but it is not affecting that blue border