Hydration error in next.js - unmatched text, throwOnHydrationMismatch, updateHostRoot - node.js

Question

I am facing this issue on a particular event page that has a route event/[id]. Apparently, my teammate who developed the code is not facing any problems. However, I face this issue whenever I reload the page. If I go to the page through normal flow i.e. url/eventList -> click on event card -> url/event/[id] then everything works fine. But as soon as I reload the page, I face hydration errors.
npm version: 8.19.3
node version: 16.17.0
Errors:
1. Text content does not match server-rendered HTML.
2. Error: Hydration failed because the initial UI does not match what was rendered on the server.
3. Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
/events/[id] page;:
import Event from '../../../Components/Event/Event';
import { useRouter } from 'next/router';
import classes from './event.module.css';
const EventDetails = (props) => {
const router = useRouter();
const {
query: { tid },
} = router;
return (
<section style={{ minHeight: '91vh' }} className={classes.background}>
<Event eventDetails={props.eventDetails} teamId={tid} />
</section>
);
};
export async function getStaticPaths() {
const events = await fetch(
process.env.NEXT_PUBLIC_BACKEND_API + 'events/'
).then((res) => res.json());
return {
fallback: false,
paths: events.map((event) => {
const eventId = event.id;
return {
params: {
id: eventId,
},
};
}),
};
}
export async function getStaticProps(context) {
const eventId = context.params.id;
const res = await fetch(
process.env.NEXT_PUBLIC_BACKEND_API + 'events/' + eventId
);
if (!res || res.status != 200) {
return {
notFound: true,
};
}
const eventDetails = await res.json();
return {
props: {
eventDetails: eventDetails,
},
revalidate: 100,
};
}
export default EventDetails;
package.json :-
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "npm run prettify && next dev",
"build": "npm run prettify && next build",
"start": "next start",
"lint": "npm run prettify && next lint",
"prettify": "prettier --write \"**/*.{js, jsx}\""
},
"dependencies": {
"#emotion/react": "11.10.4",
"#emotion/server": "11.10.0",
"#emotion/styled": "11.10.4",
"#mui/icons-material": "5.10.6",
"#mui/material": "5.10.6",
"#mui/x-date-pickers": "^5.0.3",
"cryptr": "^6.0.3",
"dayjs": "^1.11.5",
"intl": "^1.2.5",
"mui-file-dropzone": "^4.0.2",
"next": "12.2.5",
"next-auth": "^4.12.0",
"normalize.css": "^8.0.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-share": "^4.4.1",
"react-toastify": "^9.0.8",
"swr": "^1.3.0",
"universal-cookie": "^4.0.4"
},
"devDependencies": {
"eslint": "8.23.1",
"eslint-config-next": "12.3.1",
"eslint-config-prettier": "8.5.0",
"prettier": "2.7.1"
}
}
I have tried modifying getStaticPaths and getStaticProps but this issue still persists.