css - Scroll keeps jumping back to the beginning on state change using React, Typescript with Emotion

Question

Problem

Horizontal scroll container keeps jumping when updating state from hover events. How do I prevent any of these state changes from re-rendering the scroll position back to the beginning?

You can see this behavior in this code sandbox: https://codesandbox.io/s/scrollstate-jumping-issue-xreii

---

Attempts to Fix

1. I've attempted to give give the Box component a class name using these steps – which did not work

const NamedContainer = ({ className, children, onMouseEnter, onMouseLeave }: { className: string, children?: JSX.Element | JSX.Element[], onMouseEnter: ()=>void, onMouseLeave: ()=>void }) => (
          <div className={className} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>{children}</div>
)
     
const ScrollContainer = styled(NamedContainer)`
          border: 1px solid teal;
          width: 500px;
          overflow-x: scroll;
          overflow-y: hidden;
          white-space: nowrap;
          height: 200px;
     `

2. Using Emotion's css prop styling instead of styled components. While using this attempting this fix, I ran into an issues with Typescript accepting the /** @jsx jsx */ pragma mark.

question from:https://stackoverflow.com/questions/65839769/scroll-keeps-jumping-back-to-the-beginning-on-state-change-using-react-typescri

Answer 1

Waitting for answers