Cannot use react-window and react-nice-scroll together?

[LucianoInfanti]

I was trying to combine both react-window and react-nice-scroll to create a nice infinite scroll list with a subtle skew effect. But unfortunately it didn't work at all. As soon as I wrap my <FixedSizeList> component with <ScrollContainer> from react-nice-scroll everything disappears.

This is my code for reference (without the <ScrollContainer>)

"use client";

import style from "./page.module.css";
import Link from "next/link";
import { FixedSizeList } from "react-window";
import { motion } from "framer-motion";
import Data from "../Data/Data.json";

const Row = ({ index, style }) => {
  const item = Data[index % Data.length];
  return (

    <motion.li
      style={style}
      className={style.list_item}
      initial={{ y: 100, opacity: 0 }}
      animate={{ y: 0, opacity: 1 }}
      transition={{ duration: 1, ease: "easeInOut" }}
    >
      <Link href={`/writing/${item.slug}`}>{item.title}</Link>
    </motion.li>
  );
};

export default function Page() {
  return (
    <FixedSizeList
      className={style.list_wrapper}
      height={window.innerHeight}
      itemCount={Infinity}
      itemSize={120}
    >
      {Row}
    </FixedSizeList>
  );
}

Is there a way to combine them both? Or maybe achieve this skew effect in a different way or using a different third-party library for it?

Thanks in advance.