How could i use a Next.js image as onClick form submit for google Oauth?

Disclaimer: Noob/Beginner

I have a working email and socials next auth custom signin page up and running.

Now I want to style it differently so that I can use next.js /Image to have a clickable icon/img that will action the same submit as the current button does.

Here is my fully functioning signin page...

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 },
  }
}

The /Image code would look something like this...

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

UPDATE:

I had previously used a .map method to add my providers with standard button submits as follows...

{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>
    )
   })}

Both of these methods work. But how do I switch out the button for an image instead?

Any and all ideas would be appreciated.

Thanks in advance

from How could i use a Next.js image as onClick form submit for google Oauth?