Stories bug

Hi. I tried to implement the stories code from you challenge.
The initial stories implementation has a bug when we mix up the scroll and tap movement through the stories.

Example - tap till the end of the stories, than scroll back with mouse scroll then try to tap forward - nothing works.

i've implemented the solution to improve the gesture mix in react.
If you are accepting PRs I will adapt it to vanilla js code

```js
/* eslint-disable react/style-prop-object */
import { useCallback, useEffect, useRef, useState } from "react";
import "./stories.css";

const storiesBreakpoints = {};

function Stories() {
const storiesRef = useRef(null);

const storiesMedian = useCallback(
() => storiesRef.current.offsetLeft + storiesRef.current.clientWidth / 2,
[storiesRef]
);

const [currentStory, setCurrentStory] = useState(null);

useEffect(() => {
for (let i = 0; i < storiesRef.current.children.length; i++) {
storiesBreakpoints[
storiesRef.current.children[i].offsetLeft -
storiesRef.current.offsetLeft
] = i;
}
}, []);

useEffect(() => {
setCurrentStory(storiesRef.current.firstElementChild.lastElementChild);
}, []);

const navigateStories = useCallback(
(direction) => {
if (currentStory === null) {
return;
}

let lastItemInUserStory;
let nextUserStory;

if (direction === "next") {
lastItemInUserStory = currentStory.parentNode.firstElementChild;
nextUserStory =
currentStory.previousElementSibling ||
currentStory.parentElement.nextElementSibling?.lastElementChild;
} else if (direction === "prev") {
lastItemInUserStory = currentStory.parentNode.lastElementChild;

nextUserStory =
currentStory.nextElementSibling ||
currentStory.parentElement.previousElementSibling?.firstElementChild;
}

if (lastItemInUserStory === currentStory && nextUserStory) {
nextUserStory.scrollIntoView({
behavior: "smooth",
});
} else if (nextUserStory) {
(direction === "prev" ? nextUserStory : currentStory).classList.toggle(
"seen"
);
}

if (nextUserStory) {
setCurrentStory(nextUserStory);
}
},
[currentStory]
);

const storiesClick = useCallback(
(e) => {
if (e.target.nodeName !== "ARTICLE") {
return;
}

navigateStories(e.clientX > storiesMedian() ? "next" : "prev");
},
[navigateStories, storiesMedian]
);

return (
<>

export default Stories;

```

Start with the existing Stories implementation and stories.css, then reproduce the sequence of tapping to the end, scrolling back, and tapping forward. Compare the reported React implementation with the repository's vanilla JavaScript structure; done means forward and backward navigation still works after mixing scroll and tap gestures.

Written by the indexing model from the issue text.