Ampersand Sass selector doesn't work with sibling selector in styled components

import styled from "styled-components";

const Styles = styled.div`
  .App {
    &__input {
      width: 200px;
      background-color: orangered;
      &:focus {
        background-color: greenyellow;
      }
    }
    &__button {
      background-color: grey;
    }
    /* this works */
    &__input:focus + .App__button {
      background-color: greenyellow;
    }

    /* this doesn't */
    &__input:focus + &__button {
      background-color: greenyellow;
    }
  }
`;

export default function App() {
  return (
    <Styles>
      <div className="App">
        <input className="App__input" />
        <button className="App__button">click</button>
      </div>
    </Styles>
  );
}

As you can see in the code, I expect the & to refer to .App as it is working in other places as well as in node_sass.

Is this a bug in styled-components or am I missing something here?

Here is a codesandbox link to replicate the issue.