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;
}

Dom Structure:

<Top>
    <Avatar
            src="./assets/person/1.jpeg"
            alt=""
            sx={{ width: "50px", height: "50px" }}
      />
      <Input placeholder="What's in your mind?" />
</Top>

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?