Tengo un próximo componente JS aquí:

 import styles from '../styles/Navbar.module.css' import Image from 'next/image' export const Navbar = () => { <div> <Image className={styles["navbar-home-icon"]} src="/vercel.svg"/> </div> }

Navbar.module.css :

 .navbar-home-icon { width: 60px; height: 60px; border: 5px solid red; }

El problema es que no puedo usar la navbar-home-icon para establecer el ancho y el alto de la imagen. Ni siquiera aparece el borde. me tira este error

Error: la imagen con src "/vercel.svg" debe usar las propiedades "ancho" y "alto" o la propiedad "layout='fill'"

Sé que se está detectando el archivo css porque esto es lo que aparece en la vista del desarrollador:

Si agrego propiedades de height y width en la etiqueta misma, aparece la imagen.

Entiendo cuál es el error, pero ¿cómo controlo el ancho/alto/cualquier otra propiedad a través de mi archivo css? - ¿En lugar de declararlos explícitamente dentro de la etiqueta de imagen?