Laravel + React, Inertia SSR using icons with a translation file

Question

Integrating icons to Inertia SSR rendering causing to a warning and error. SSR rendering working on the other pages except the one with the error.

Icons that exists in homeServiceIcons

import { SiLinkedin, SiSoundcloud, SiSpotify, SiTelegram, SiTwitter, SiYoutube } from "react-icons/si";
const homeServiceIcons: ItemwIcon[] = [
  {
    Icon: SiSpotify
  },
  {
    Icon: SiSoundcloud,
  },
  {
    Icon: SiYoutube,
  },
  {
    Icon: SiTwitter,
  },
  {
    Icon: SiLinkedin,
  },
  {
    Icon: SiTelegram,
  }
];

Items that exists in ui.home.services.items

 "items": [
                    {
                        "head": "**",
                        "desc": "**"
                    },
                    {
                        "head": "**",
                        "desc": "**"
                    },
                    {
                        "head": "**",
                        "desc": "**"
                    },
                    {
                        "head": "**",
                        "desc": "**"
                    },
                    {
                        "head": "**",
                        "desc": "**"
                    },
                    {
                        "head": "**",
                        "desc": "**"
                    }
                ]

ItemwIcon type

export type ItemwIcon = {
    head?: string;
    desc?: string;
    Icon: IconType;
};

Services.tsx file

import { useTranslation } from "react-i18next";
import type { ItemwIcon } from "@/types";
import { PropsWithChildren } from "react";
import { homeServiceIcons } from "@/constants";
import { IconType } from 'react-icons/lib';
import 'react-multi-carousel/lib/styles.css';
import Carousel from 'react-multi-carousel';

export default function Services() {
    const { t } = useTranslation();
    const items: Array<ItemwIcon> = t("ui.home.services.items", { returnObjects: true });
    const responsive = {
        desktop: {
            breakpoint: { max: 3000, min: 1024 },
            items: 3,
        },
        tablet: {
            breakpoint: { max: 1024, min: 464 },
            items: 2,
        },
        mobile: {
            breakpoint: { max: 464, min: 0 },
            items: 1,
        }
    };
    return (
        <div className='services'>
            <div className="section">
                <h2 className="header section-header">{t('ui.home.services.header')}</h2>
                <p className="description">{t('ui.home.services.content')}</p>
                <div className="items">
                    <Carousel
                        responsive={responsive}
                        swipeable={true}
                        infinite={true}
                    >
                        {items.map((item: ItemwIcon, index: number) => (
                            <Service
                                key={index}
                                head={item.head}
                                desc={item.desc}
                                Icon={homeServiceIcons[index].Icon}></Service>
                        ))}
                    </Carousel>
                </div>
            </div>
        </div>
    )
}

function Service({ head = '', desc = '', Icon }: ItemwIcon) {
    return (
        <div className="item">
            <div className="icon"><Icon /></div>
            <h3 className="head">{head}</h3>
            <p className="desc">{desc}</p>
        </div>
    )
}

After i run the server with this commands

npm run build && php artisan inertia:start-ssr
php -S localhost:3000 -t public

Inertia ssr console producing this Warning

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.
    at Services (file:///C:/Users/EB/Desktop/sites/smm/v1/bootstrap/ssr/assets/Home-DJ7BzeDT.js:161:17)
    at div
    at div
    at Frontend (file:///C:/Users/EB/Desktop/sites/smm/v1/bootstrap/ssr/assets/Frontend-D_bdePOo.js:56:21)
    at Home (file:///C:/Users/EB/Desktop/sites/smm/v1/bootstrap/ssr/assets/Home-DJ7BzeDT.js:663:17)
    at w (file:///C:/Users/EB/Desktop/sites/smm/v1/node_modules/@inertiajs/react/dist/index.esm.js:1:489)
    at CurrencyProvider (file:///C:/Users/EB/Desktop/sites/smm/v1/bootstrap/ssr/ssr.js:4311:29)
    at I18nextProvider (file:///C:/Users/EB/Desktop/sites/smm/v1/node_modules/react-i18next/dist/es/I18nextProvider.js:5:5)
    at div
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
    at renderElement (C:\Users\EB\Desktop\sites\smm\v1\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6047:9)
    at renderNodeDestructiveImpl (C:\Users\EB\Desktop\sites\smm\v1\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6108:11)
    at renderNodeDestructive (C:\Users\EB\Desktop\sites\smm\v1\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6080:14)
    at renderNode (C:\Users\EB\Desktop\sites\smm\v1\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6263:12)
    at renderHostElement (C:\Users\EB\Desktop\sites\smm\v1\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:5646:3)
    at renderElement (C:\Users\EB\Desktop\sites\smm\v1\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:5956:5)
    at renderNodeDestructiveImpl (C:\Users\EB\Desktop\sites\smm\v1\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6108:11)
    at renderNodeDestructive (C:\Users\EB\Desktop\sites\smm\v1\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6080:14)
    at renderNode (C:\Users\EB\Desktop\sites\smm\v1\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6263:12)
    at renderChildrenArray (C:\Users\EB\Desktop\sites\smm\v1\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6215:7)

When i check the console this is the error in the page

app-CJZIt7qN.js:65 Uncaught Error: Minified React error #418; visit https://reactjs.org/docs/error-decoder.html?invariant=418 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at vl (app-CJZIt7qN.js:65:4908)
    at sm (app-CJZIt7qN.js:67:45429)
    at om (app-CJZIt7qN.js:67:39641)
    at yS (app-CJZIt7qN.js:67:39569)
    at da (app-CJZIt7qN.js:67:39423)
    at tm (app-CJZIt7qN.js:67:34529)
    at O (app-CJZIt7qN.js:52:1565)
    at MessagePort.B (app-CJZIt7qN.js:52:1933)
vl @ app-CJZIt7qN.js:65
sm @ app-CJZIt7qN.js:67
om @ app-CJZIt7qN.js:67
yS @ app-CJZIt7qN.js:67
da @ app-CJZIt7qN.js:67
tm @ app-CJZIt7qN.js:67
O @ app-CJZIt7qN.js:52
B @ app-CJZIt7qN.js:52
app-CJZIt7qN.js:67 Uncaught Error: Minified React error #423; visit https://reactjs.org/docs/error-decoder.html?invariant=423 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at sm (app-CJZIt7qN.js:67:45089)
    at om (app-CJZIt7qN.js:67:39641)
    at yS (app-CJZIt7qN.js:67:39569)
    at da (app-CJZIt7qN.js:67:39423)
    at Rl (app-CJZIt7qN.js:67:35811)
    at tm (app-CJZIt7qN.js:67:34762)
    at O (app-CJZIt7qN.js:52:1565)
    at MessagePort.B (app-CJZIt7qN.js:52:1933)

I am sure there is nothing wrong with the SSR rendering part and since the code displays the page there is nothing wrong with the code either. But in the SSR rendering part using the Icons from a predefined dictionary might causing to this error.

So what is the problem in here and how to solve it?

Trial 1:

I excluded the Icon property from component and error remained. I excluded the Service component from the code and error remained I excluded the Carousel part from the code and error gone.

Conclusion:

Carousel part causing to the error.

Trial 2:

I added ssr={true} and deviceType="desktop" properties to the Carousel component still the same error

Trial 3:

I used react-responsive-carousel instead of react-multi-carousel error disappeared

Conclusion

react-multi-carousel causing to a ssr rendering related error

Trial 4:

Got the same error with slick carousel Tried Swiper carousel and now it seems working fine...