如何将Next.js Image用作Google OAuth点击提交触发元素？

我是新手/初学者，已经搭建好可正常运行的邮箱及第三方社交账号NextAuth自定义登录页面。现在想调整样式，使用Next.js的Image组件制作一个可点击的图标/图片，实现与当前按钮相同的提交功能。

当前完整可运行的登录页面代码 #

import React from 'react'
import {getProviders, signIn} from 'next-auth/react'
import { getCsrfToken } from "next-auth/react"
import styles from '../../styles/signin.module.css'
import Logo from '../../components/Logo'

export default function SignIn ({ csrfToken, providers }) {
  return (
    <div className={styles.content}>
      <div className={styles.cardWrapper}>
        <Logo className={styles.logo}/>
        <div className={styles.cardContent}>
          <form method="post" action="/api/auth/signin/email">
            <input name="csrfToken" type="hidden" defaultValue={csrfToken} />
            <input type="email" id="email" name="email" placeholder='Email..' />
            <button className={styles.primaryBtn} type="submit">Sign in with Email</button>
          </form>
          <p className={styles.seperator}> Or  </p>
          <form method="post" action="/api/auth/signin/google">
            <input name="csrfToken" type="hidden" defaultValue={csrfToken} />
            <button className={styles.primaryBtn} type="submit">Sign in with Google</button>
          </form>
        </div>
      </div>
    </div>
  )
}
export async function getServerSideProps(context) {
  const csrfToken = await getCsrfToken(context)
  const providers = await getProviders(context)
  return {
    props: { csrfToken, providers },
  }
}

Next.js Image组件示例代码 #

<a>
    <Image 
        priority="true"
        src="/google_login.png"
        alt="Google Login"
        width="200"
        height="200"
        layout="intrinsic"
     />
</a>

注：Next.js Image组件的width和height无需添加px单位，直接填写数值即可

更新说明：之前使用的.map方法实现登录提供商列表代码 #

{Object.values(providers).map((provider) => {
    console.log(providers)
    if (provider.name === "Email") {
      return
    }
    return (
      <div key={provider.name}>
        <button onClick={() => signIn(provider.id)}>
          Sign in with {provider.name}
        </button>
      </div>
    )
   })}

这两种方式都能正常工作，但我该如何将按钮替换为图片呢？欢迎提供任何思路，提前感谢！

内容的提问来源于stack exchange，提问作者Yan