How to refer to an adjacent element in styled-components?

Question

React

Can you please tell me how can I refer to another element in styled-components?
It is necessary to set styles for NavIcon when receiving props in SearchField

export const NavIcon = styled.svg`
  font-size: 20px;
  margin-right: 15px;
  color: inherit;
  &:hover {
    color: #000;
    cursor: pointer;
  }
`

export const SearchField = styled.input<{ isOpen: boolean }>`
  border-radius: 50px;
  border: 2px solid ${(props) => props.theme.colors.primary};
  padding: 8px 0;
  outline: none;
  transition: all 0.3s ease-in-out;
  opacity: 0;
  width: 0;
  margin-right: 15px;
  ${(props) => props.isOpen && `opacity: 1; width: 200px; padding: 8px 15px;`};
  ${(props) => props.isOpen && NavIcon...

`

<SearchForm ref={searchRef} onSubmit={(e) => e.preventDefault()}>
      <NavIcon
        as={BiSearch}
        onClick={() => {
          setIsOpen(!isOpen)
        }}
      />
      <SearchField isOpen={isOpen} type='text' placeholder='Search...' />
    </SearchForm>

Answer 1

In css, you can refer to an adjacent element through "+". It also works in styled-components.

export const NavIcon = styled.svg`
  font-size: 20px;
  margin-right: 15px;
  color: inherit;
  &:hover {
    color: #000;
    cursor: pointer;
  }

  + ${SearchField} {
    ....
  }