fix: wrap Image component to prevent SSR issues

This is related to hashicorp/next-mdx-remote#405
When Image is used directly it produces error when server rendered.
Wrapping it allows server to render the component without issues.

src/components/ImageSSR/ImageSSR.tsx

@@ -0,0 +1,8 @@
+import Image, { ImageProps } from 'next/image';
+import * as React from 'react';
+
+function ImageSSR(props: ImageProps) {
+	return <Image {...props} />;
+}
+
+export default ImageSSR;

src/components/ImageSSR/index.ts

@@ -0,0 +1,2 @@
+export * from './ImageSSR';
+export { default } from './ImageSSR';

src/constants/componentMap.ts

@@ -1,20 +1,21 @@
-import Image from 'next/image';
+import { MDXComponents } from 'mdx/types';
 
 import AboutMeToggleMessage from '@/components/AboutMeToggleMessage';
 import { default as CodeSnippet } from '@/components/CodeSnippet/CodeSnippet';
 import CV from '@/components/CurriculumVitae';
 import FullWidthSplitSection from '@/components/FullWidthSplitSection';
+import Image from '@/components/ImageSSR';
 import ResponsiveImage from '@/components/ResponsiveImage';
 import Spinner from '@/components/Spinner';
 import TooltipMessage from '@/components/TooltipMessage';
 
-export const COMPONENT_MAP = {
+export const COMPONENT_MAP: MDXComponents = {
 	pre: CodeSnippet,
 	ResponsiveImage,
 	Image,
-	FullWidthSplitSection,
 	Spinner,
 	AboutMeToggleMessage,
 	TooltipMessage,
 	CV,
+	FullWidthSplitSection,
 };