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 1db0dcef81..b2db487b15 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
@@ -8,7 +8,6 @@ import {
   Text,
   useSitecoreContext,
 } from '@sitecore-jss/sitecore-jss-nextjs';
-import { getEEMarkup } from '@sitecore-jss/sitecore-jss-react';
 
 interface Fields {
   Image: ImageField;
@@ -38,13 +37,12 @@ export const Banner = (props: ImageProps): JSX.Element => {
       ?.replace(`width="${props?.fields?.Image?.value?.width}"`, 'width="100%"')
       .replace(`height="${props?.fields?.Image?.value?.height}"`, 'height="100%"'),
   };
-  const Image = () => (modifyImageProps.editable ? getEEMarkup(modifyImageProps) : null);
   const id = props.params.RenderingIdentifier;
 
   return (
     <div className={`component hero-banner ${props.params.styles}`} id={id ? id : undefined}>
       <div className="component-content sc-sxa-image-hero-banner" style={backgroundStyle}>
-        {sitecoreContext.pageEditing ? <Image /> : ''}
+        {sitecoreContext.pageEditing ? <JssImage field={modifyImageProps} /> : ''}
       </div>
     </div>
   );