reactjs - Chakra UI アイコンが入力内に配置されていない

Question

入力の真ん中にアイコンを正しく配置しようとしていますsize="xs"。ただし、私の試みはすべて失敗し、アイコンの位置が低すぎる/低すぎるままです。通常のアイコンの代わりに使用してみましIconButtonたが、どちらも機能しませんでした。

import { Input, InputGroup, InputLeftElement } from "@chakra-ui/react"
import { SearchIcon } from "@chakra-ui/icons"

// ...

    <InputGroup>
      <InputLeftElement
        pointerEvents="none"
        children={<SearchIcon color="gray.300"/>}
        size="xs"
        />
      <Input
        variant="outline"
        size="xs"
        placeholder={``}
      />
    </InputGroup>

私は何を間違っていますか？

これがコードサンドボックスです。このコードサンドボックスでは、アイコンは実際には入力の中央の上にあることに注意してください (これはまだ間違っています)。ローカル マシンのように下ではありません。

https://codesandbox.io/s/optimistic-bartik-5ifsd?file=/src/App.tsx