Nextjs Hydration Failed Mismatched Time between Client and Server

So I'm creating a timeline component in a Next app and while rendering the UI this error is getting thrown in the console

Warning: Text content did not match. Server: "May 2022 - Present" Client: "Apr 2022 - Invalid Date

Error: Text content does not match server-rendered HTML.

Error: Hydration failed because the initial UI does not match what was rendered on the server.

Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

Here's the code snippet

const Timeline = ({experiences}) => {
      experiences.forEach((experience) => {
      experience.startDate =  new Date(experience.startDate).toLocaleDateString('en-US', { year: 'numeric', month: 'short' });
      experience.endDate = experience.endDate ? new Date(experience.endDate).toLocaleDateString('en-US', {year: 'numeric', month: 'short'}): 'Present';
      });

    return (
       <div>
         {experiences.map((experience,idx) => (
           <div key={`timeline-item-${idx}`}>
            {`${experience.startDate} - ${experience.endDate}`}
           </div>))}
       </div>