Problems with react-vertical-timeline-component

`I have been working on a 3d portifolio everything was going well until i introduced the react vertical component into the system i am getting a 504 error stating that (Outdated Optimize Dep) while using React vite

I was expecting to get the normal react vertical component out look since i had install it and imported the necessary components`

import { skills , experiences } from "../constants"
import { VerticalTimeline, VerticalTimelineElement }  from 'react-vertical-timeline-component';
import 'react-vertical-timeline-component/style.min.css';

const About = () => {
return (
<section className="max-container">
    <h1 className="head-text">Hello</h1>
      Hello , I am <span className="blue_gradient_text
      font-semibold drop-shadow">John Doe</span>
      <div className="mt-5 flex flex-col gap-3 
      text-slate-500">
        <p>Incomming Software Engineer </p>
      </div>
      <div className="py-10 flex flex-col "> 
          <h3 className="subhead-text">My Skills</h3>
          <div className="mt-16 flex flex-wrap gap-12">
               {skills.map((skills)=>(
                  <div className="block-container w-20 h-20">
                    <div className="btn-back rounded-xl"/>
                    <div className="btn-front rounded-xl flex justify-center
                    items-center">
                      <img 
                      src={skills.imageUrl}
                      alt={skills.name}
                      className="w-1/2 h-1/2 object-contain"
                        />
                    </div>
                  </div>
               ) )} 
          </div>
      </div>

      <div className="py-16">
          <h3 className="subhead-text">Work Experince</h3>
          <div className="mt-5 flex flex-col gap-3 
      text-slate-500">
        <p>I have had the opportunity to work with a few companies and here is the list </p>
      </div>
      <div className="mt-12 flex"> 
          <VerticalTimeline>
            {experiences.map((experiences)=>(
              <VerticalTimelineElement>
                <div>
                  <h3>
                    {experiences.title}
                  </h3>
                </div>
              </VerticalTimelineElement>
            ))}
          </VerticalTimeline>
      </div>
      </div>
</section>
 )
}

export default About

You need to sign in to view this answers