Header z-index Prevents Smooth Progress Bar Transition

[hakilee]

I've applied bprogress (Next.js App Router) to my project. However, when I set a z-index and background-color for the header component, the progress bar exhibits a choppy disappearance as shown below.

Screen.Recording.2025-03-26.at.20.39.50.mov

Below is a portion of the CSS code for my header component (using vanilla-extract):

export const root = style({
  position: 'sticky',
  top: 0,
  left: 0,
  width: '100%',
  zIndex: theme.zIndices.header,
});

export const container = style({
  ...theme.layouts.rowBetween,
  position: 'relative',
  height: rem(44),
  width: '100%',
  maxWidth: theme.sizes.appWidth,
  paddingInline: theme.sizes.appInlinePadding,
  marginInline: 'auto',
  borderBottom: `${rem(1)} solid ${theme.colors.gray25}`,
  backgroundColor: theme.colors.white,
});

Additionally, I am using the Provider in the following way:

<ProgressProvider color={theme.colors.blue600} options={{ showSpinner: false }} shallowRouting={false}>
  <header className={root}>
    <div className={container}>...</div>
  </header>
  <main>{children}</main>
</ProgressProvider>

I attempted to resolve the issue by adjusting the z-index of the bprogress class, but it didn't work. Is there any solution available?