How to add backgrond color and change color on hover for Select component from Chakra UI using emotion/react

I'm using chakra ui for components and emotion/react for styling.
I'm struggling with changing background-color for selected option, and also change backrgoung-color on hover. I've done it as in documentation: https://chakra-ui.com/docs/components/select/usage#usage
I don't see there how can I customize options from Select component.

Here You can find how my Select looks like after some sorto of customization of Select field:

<Select
          icon={<DropdownIncon />}
          value={yearsRange[date.getFullYear()]}
          onChange={handleYearChange}
          fontWeight="600"
          border="none"
          background="transparent"
          fontSize="20px"
          color={colors.primary}
          sx={{
            appearance: 'none',
            padding: '0 5px',
            paddingInlineStart: 'none',
            WebkitPaddingStart: 'none',
            '& + .chakra-select__icon-wrapper': {
              order: -1,
              position: 'static',
              transform: 'none',
            },
          }}
          rootProps={{
            display: 'flex',
            alignItems: 'center',
          }}
        >
          {yearsRange.map((year) => (
            <StyledOption key={year} value={year}>
              {year}
            </StyledOption>
          ))}
        </Select>

In external file for styled I have styles like this:

import styled from '@emotion/styled';

export const StyledOption = styled.option`
  :hover {
    background-color: yellow;
  }

  background-color: red;
  :active {
    background_color: pink;
  }
`;

And nothing happens, I still have default color of selected option

Instead of customizing option customize the select:

export const StyledSelect = styled.select`
  & > option {
    background-color: red;
  }
  & > option:hover {
    background-color: yellow;
  }
  & > option[selected] {
    background-color: pink;
  }
`;