I am trying to implement a vertical timeline on my project. But its not showing on the generated HTML code. When I tried to inspect it, I see that the classes are generated to be hidden with "is-hidden". I think it might be having issues with intersection observer.
timeline.js file
"use client";import React from "react";import SectionHeading from "./section-heading";import { VerticalTimeline, VerticalTimelineElement,} from "react-vertical-timeline-component";import "react-vertical-timeline-component/style.min.css";import { timelineData } from "@/lib/data";import { useSectionInView } from "@/lib/hooks";export default function Experience() { const { ref } = useSectionInView("Timeline"); return (<section id="timeline" ref={ref} className="scroll-mt-28 mb-28 sm:mb-40 text-center"><SectionHeading>Timeline</SectionHeading><VerticalTimeline lineColor=""> {timelineData.map((item, index) => (<React.Fragment key={index}><VerticalTimelineElement contentStyle={{ background: "rgba(255, 0, 255, 0.05)", boxShadow: "none", border: "1px solid rgba(0, 230, 0, 0.05)", textAlign: "left", padding: "1.3rem 2rem", }} contentArrowStyle={{ borderRight: "0.4rem solid rgba(255, 255, 255, 0.5)", }} date={item.date} icon={item.icon} iconStyle={{ background: "rgba(255, 255, 255, 0.15)", fontSize: "1.5rem", }}><h3 className="font-semibold capitalize">{item.title}</h3><p className="font-normal !mt-0">{item.location}</p><p className="!mt-1 !font-normal text-gray-700 dark:text-white/75"> {item.description}</p></VerticalTimelineElement></React.Fragment> ))}</VerticalTimeline></section> );}
data.js file
{ index_number: 1, title: "Bachelor's Degree", location: "Bangladesh", description:"I completed my Bachelor's Degree in Computer Science and Software Engineering at the American International University-Bangladesh.", tags: ["CSSE", "Bachelors", "Graduation"], date: "2-September-1994", icon: <BiSolidGraduation />, }, { index_number: 1, title: "Bachelor's Degree", location: "Bangladesh", description:"I completed my Bachelor's Degree in Computer Science and Softwarelre asjdajs.", tags: ["CSSE", "Bachelors", "Graduation"], date: "11-September-2021", icon: <BiSolidGraduation />, },```