Using React Suspense causes Hydration Failure

[JetRafael]

What version of Remix are you using?
2.9.2

Could anyone enlighten me why I'm getting hydration error when using React Suspense component?

I have a simple mui navigation items which was wrapped in Remix Await component.

<List
        disablePadding
        sx={{ display: 'flex', alignItems: 'center', flexDirection: 'column', gap: '10px' }}
      >
        <Suspense fallback={<LeftNavSkeleton />}>
          <Await resolve={props.items}>
            <LeftNavItems />
          </Await>
        </Suspense>
      </List>

But as soon as I add a Suspense with or without fallback, browser console logs the Hydration Failure error (see image below). The weird part was that this error happens randomly. Right after refreshing the page at least 3 to 4 times.

I know this has been raised before but I am not sure if this was addressed already in previous Remix releases.