Error: Invalid <Link> with <a> child. Please remove <a> or use <Link legacyBehavior>. Learn more: https://nextjs.org/docs/messages/invalid-new-link-with-extra-anchor

[エラー]Error: Invalid with child. Please remove or use .を解決

とある教材でヘッダーのロゴを作成中このエラーに当たった。
以前にも（リンクだけの実装だったので）同じエラーに当たっていたので怖がることはなかったが、今回はこのような実装をしたかったので（下記画像）をaタグに適用したかったのでaタグを削除できなかった。

環境

Mac(M1, 2020)
vscode

ぶつかったエラー

Error: Invalid with child. Please remove or use .
Learn more: https://nextjs.org/docs/messages/invalid-new-link-with-extra-anchor

翻訳・意味
エラー: a の子を持つ Link が無効です。 a を削除するか、Link legacyBehavior を使用してください。
詳細: https://nextjs.org/docs/messages/invalid-new-link-with-extra-anchor

export default function Logo({ boxOn = false }) {
  return (
    <Link href="/">
       <a className={boxOn ? styles.box : styles.basic}>CUBE</a>
    </Link>
  )
}

aタグを削除かLink legacyBehavior を使用？（どうこと？）どちらかを選べばいいが初学者の自分とってはなるべく大きな変更をせずに解決したい

やったこと

1.aタグ以外のタグでいいのではないかと仮定
1.aタグをdivタグに変更した。

export default function Logo({ boxOn = false }) {
  return (
    <Link href="/">
       <div className={boxOn ? styles.box : styles.basic}>CUBE</div>
    </Link>
  )
}

結果

エラーが解消されロゴCUBEが表示された