Remove outline on antd select component

I'm using antd NPM package's Select component. I want to remove the blue outline which appears when the component is focussed. How can I remove it ?

I have tried styling the component using styled components. The styling looks like follows:

const StyledSelect = styled(Select)`

    & .ant-select-selection__rendered {
        width: 200px;
        margin-left: 0;
        margin-right: 0;
        &:focus {
          outline: none;
          border: none;
        }
    }
    &.ant-select-focused {
      border: none;
      &:focus{
        outline: 0;
      }
    }
`;

I expect the blue outline to be removed. But my styling doesn't seem to be working

If you observe the CSS in your browser you can see what you need to override.

.ant-select-focused .ant-select-selector,
.ant-select-selector:focus,
.ant-select-selector:active,
.ant-select-open .ant-select-selector {
  border-color: #d9d9d9 !important;
  box-shadow: none !important;
}

I left it for hover.

codesandbox: https://codesandbox.io/s/cool-moon-ohznt