shadcnを使用してアバター画像を追加すると、丸く小さな画像ではなく大きな四角い画像として貼り付けられてしまう。

実現したいこと

shadcn/uiを用いて、アバター画像を作成したい。

前提

現在Vite, React, TypeScriptにてフロントエンドのUI画面を作成しようとしております。
作成に当たり、shadcn/uiという Radix UIとTailwind CSSを使って書かれた UI コンポーネントを使用しようと考えております。

そこでまずアバター画像を追加しようとし、https://ui.shadcn.com/docs/components/avatarのページに従い、
CLiにて以下のコマンドを実行し

npx shadcn-ui@latest add avatar

続いて、App.tsxファイルにて、以下の行を追加しました。

typescript

1import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"2 3//(中略)4 5<Avatar>6 <AvatarImage src="https://github.com/shadcn.png" />7 <AvatarFallback>CN</AvatarFallback>8</Avatar>

そしてサーバーを立ち上げ、localhost:5173にアクセスしたところ、shadcn公式ページにある

このような小さなアバター画像ではなく、

このような巨大な画像として出されてしまいました。

この挙動は、shadcnの正しい挙動なのでしょうか？
（アバター画像を丸く小さいものにするためには、私が行った操作において何か不足していたことがあったのでしょうか？）

またshadcn公式ページにあるような、小さな丸いアバター画像にするには、どのようにすればよいでしょうか？

バージョンについては
node.js: v20.11.0
npm: 10.2.4
です。

また、今回のプロジェクト作成においては、
viteプロジェクトをreact, typescriptで立ち上げ、そこにshadcnのチュートリアルに沿ってコンポーネントを追加しただけであり、それ以外の操作は行っておりません。

ソースコードは以下となります。
https://github.com/raithend/frontend