Autoscroll not working and themes not applying about react-chrono HOT 16 CLOSED

function Timeline() {
  const timelineItems = [
    {
      title: "2016",
      cardTitle: "First year",
      cardSubtitle: "",
      cardDetailedText:
        "Our first year doing Extra Life as a team with just 10 players.",
      media: {
        name: "2016 team",
        source: {
          url: "https://i.imgur.com/KvhN54a.jpg",
        },
        type: "IMAGE",
      },
    },
    {
      title: "2017",
      cardTitle: "Second year",
      cardSubtitle: "",
      cardDetailedText:
        "Our second year was similarly small, but we set the bar higher and raised more money than the year before.",
      media: {
        name: "2017 team",
        source: {
          url: "https://i.imgur.com/I1Yp4SD.png",
        },
        type: "IMAGE",
      },
    },
    {
      title: "2018",
      cardTitle: "Third year",
      cardSubtitle: "",
      cardDetailedText:
        "This year was special, as it was the first year that we had more than a handful of players. We also moved our location to West Chester University.",
      media: {
        name: "2018 team",
        source: {
          url: "https://i.imgur.com/ANVrru8.png",
        },
        type: "IMAGE",
      },
    },
    {
      title: "2019",
      cardTitle: "Fourth year",
      cardSubtitle: "",
      cardDetailedText:
        "In 2019, we became an official WCU service organization, allowing us access to even more resources to make it the best year yet. Pictured here are our captains, but our team grew in size once again. We also piloted a high school team, partnering with a local school to provide guidance and support to a group of high schoolers.",
      media: {
        name: "2019 team",
        source: {
          url: "https://i.imgur.com/JK9lBCW.jpg",
        },
        type: "IMAGE",
      },
    },
    {
      title: "2020",
      cardTitle: "Fifth year",
      cardSubtitle: "",
      cardDetailedText:
        "Despite the challenges of the pandemic, we launched our first alumni team this year, pictured here.",
      media: {
        name: "2020 team",
        source: {
          url: "https://i.imgur.com/KRVACf5.jpg",
        },
        type: "IMAGE",
      },
    },
    {
      title: "2021",
      cardTitle: "Sixth year",
      cardSubtitle: "",
      cardDetailedText:
        "Due to the continued pandemic, we piloted a fully remote team. We utilized Discord to stay connected and encourage each other throughout the event.",
      media: {
        name: "2021 team",
        source: {
          url: "https://i.imgur.com/O8xy0yL.jpg",
        },
        type: "IMAGE",
      },
    },
    {
      title: "2022",
      cardTitle: "Seventh year",
      cardSubtitle: "",
      cardDetailedText:
        "In 2022, we decided to host a hybrid event. Volunteers hosted hubs at their homes, while other players chose to play solo. We hosted a second event at a local gaming studio, Uplink Studios. We were also invited to speak at a 'Best Practices' panel at Extra Life United for our successful collegiate model. Pictured here is our panel.",
      media: {
        name: "2022 panel",
        source: {
          url: "https://i.imgur.com/aRAfrkU.jpg",
        },
        type: "IMAGE",
      },
    },
    {
      title: "2023",
      cardTitle: "Eighth year",
      cardSubtitle: "",
      cardDetailedText:
        "In 2023, we hosted an in-person event at Uplink Studios, with continued hybrid options for players who are no longer local to the area or simply prefer to play solo. We have plans for a secondary event for folks who were not able to play on our Game Day. ",
      media: {
        name: "2023 team",
        source: {
          url: "https://i.imgur.com/3dkUbsu.jpg",
        },
        type: "IMAGE",
      },
    },
  ];

  return (
    <div className="w-full h-full">
      <Chrono
        items={timelineItems}
        mediaWidth={300}
        cardWidth={300}
        enableBreakPoint
        verticalBreakPoint={500}
        scrollable={{ scrollbar: false }}
        mode="VERTICAL_ALTERNATING"
        theme={{
          primary: "var(--brand-blue)",
        }}
      />
    </div>
  );
}

export default Timeline;

 theme={{
          primary: "#eee",
 }}

<div style={{ width: "100%", height: "95vh", border: "1px solid red" }}>
      <Chrono
        items={timelineItems}
        mediaWidth={300}
        cardWidth={300}
        enableBreakPoint
        verticalBreakPoint={500}
        mode="VERTICAL_ALTERNATING"
        theme={{
          primary: "blue",
          titleColor: "#8dd0f1",
          secondary: "#fbbf24"
        }}
      />
 </div>