How to change other components’ property with styled-components?

I am using styled-components and I am trying to change the height of Top to 300px when I focus on my Input.

I was tried something like this but not working:

&:focus ${Top} {
  height: 500px;
}

My code:

export const Top = styled.div`
  display: flex;
  align-items: flex-start;
  height: 150px;
`;

export const Input = styled.textarea`
  flex: 1;
  height: 100%;
  resize: none;
  border: none;
  outline: none;
  font-size: 16px;
  padding: 10px;

  &:focus ${Top} {
    height: 500px;
  }
`;

How do I change other components’ prop with styled-components?