onClick event handler not being applied to a styled component

Question

In the code I have applied an onClick event handler on the Option component which triggers the noBorder function on clicking , but on clicking the function does not work as I do not get 'hello' in console. However on applying the same event handler in the Container component works. Can anybody tell where I am going wrong please.

const Navbar = () => {
  const noBorder = (e) => {
    // e.preventDefault();
    // e.currentTarget.style.border = "none";
    console.log("hello");
  };
  return (
    <Container>
      <LogoWrapper>
        <Logo src={logo} alt="image not found"></Logo>
      </LogoWrapper>
      <LanguageSelector>
        <GlobeIcon src={globe} alt="image not found" />
        <label htmlFor="language">
          <LanguageButton name="language">
            <Option value="english" onClick={noBorder}>
              placeholder
            </Option>
            <Option value="hindi" onClick={noBorder}>
              placeholder
            </Option>
          </LanguageButton>
        </label>
      </LanguageSelector>
    </Container>
  );
};
const Container = styled.div`
`;
const Logo = styled.img`
`;
const LogoWrapper = styled.div`
`;
const LanguageButton = styled.select`
`;
const Option = styled.option`
`;
const GlobeIcon = styled.img`
`;
const LanguageSelector = styled.div`
`;

Answer 1

option is a special HTML tag that is rendered as part of select, so interaction and styling is very limited. It has nothing to do with styled-components, since props are just passed on. See here for a more in-depth answer.