diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Image.tsx b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Image.tsx
index 749e3ccf4a..cb29d12557 100644
--- a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Image.tsx
+++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Image.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
 import {
   Image as JssImage,
   Link as JssLink,
@@ -35,7 +35,9 @@ export const Banner = (props: ImageProps): JSX.Element => {
     isPageEditing && props.fields?.Image?.value?.class === 'scEmptyImage'
       ? 'hero-banner-empty'
       : '';
-  const backgroundStyle = props?.fields?.Image?.value?.src && { backgroundImage: `url('${props.fields.Image.value.src}')` };
+  const backgroundStyle = (props?.fields?.Image?.value?.src && {
+    backgroundImage: `url('${props.fields.Image.value.src}')`,
+  }) as CSSProperties;
   const modifyImageProps = {
     ...props.fields.Image,
     editable: props?.fields?.Image?.editable