使用样式化组件重新渲染时，输入失去焦点

Question

在我的组件中，有这个（我正在使用styled-components库）：

const [key, setKey] = useState("");
const [description, setDescription] = useState("");

const Wrapper = styled.div`
    display: flex;
    flex-direction: row;
    align-items: center;
`;

return (
  <Wrapper>
    <input
      value={key}
      onChange={e => setKey(e.target.value)}
    />
    <input
      value={description}
      onChange={e => setDescription(e.target.value)}
    />
    <Button text="Añadir" onClick={onClickAdd} />
  </Wrapper>
);

但是，每次我在输入中输入字母时，它都会失去焦点。这是由于样式组件引起的。我知道这是因为，如果我将<Wrapper>替换为<div style={{...}}>，就可以正常工作。

我想知道为什么会这样