diff --git a/plugins/scaffolder/src/components/TaskPage/TaskErrors.tsx b/plugins/scaffolder/src/components/TaskPage/TaskErrors.tsx
index 3d82bfc5a3..4f8ce974c8 100644
--- a/plugins/scaffolder/src/components/TaskPage/TaskErrors.tsx
+++ b/plugins/scaffolder/src/components/TaskPage/TaskErrors.tsx
@@ -14,21 +14,25 @@
  * limitations under the License.
  */
 import { Box } from '@material-ui/core';
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { DismissableBanner } from '@backstage/core-components';
-import { TaskStream } from '../hooks/useEventStream';
 
-type TaskPageLinksProps = {
-  taskStream: TaskStream;
+type TaskErrorsProps = {
+  error?: Error;
 };
 
-export const TaskErrors = ({ taskStream }: TaskPageLinksProps) => {
-  return taskStream.error ? (
+export const TaskErrors = ({ error }: TaskErrorsProps) => {
+  const id = useRef('');
+
+  useEffect(() => {
+    id.current = String(Math.random());
+  }, [error]);
+  return error ? (
     <Box>
       <DismissableBanner
-        id={String(Math.random())}
+        id={id.current}
         variant="warning"
-        message={taskStream.error.message}
+        message={error.message}
       />
     </Box>
   ) : null;
diff --git a/plugins/scaffolder/src/components/TaskPage/TaskPage.tsx b/plugins/scaffolder/src/components/TaskPage/TaskPage.tsx
index 4fa5968216..0267c58fe1 100644
--- a/plugins/scaffolder/src/components/TaskPage/TaskPage.tsx
+++ b/plugins/scaffolder/src/components/TaskPage/TaskPage.tsx
@@ -357,7 +357,7 @@ export const TaskPage = ({ loadingText }: TaskPageProps) => {
                 {!currentStepId && <Progress />}
 
                 <div style={{ height: '80vh' }}>
-                  <TaskErrors taskStream={taskStream} />
+                  <TaskErrors error={taskStream.error} />
                   <LogViewer text={logAsString} />
                 </div>
               </Grid>