Inertia SSR and Styled Components

i'm trying to add the styles tag that generated by styled components and I want to pass it to the blade view in order to be added as part of the head tag before the JS file of the client-side are loaded, I couldn't figure it out.

here is my SSR setup.

createServer((page) =>
    createInertiaApp({
        page,
        render: ReactDOMServer.renderToString,
        resolve: (name) => {
            const pages = import.meta.glob("./Pages/Public/**/*.jsx", {
                eager: true,
            });
            return pages[`./Pages/Public/${name}.jsx`];
        },
        setup: ({ App, props }) => {
            const sheet = new ServerStyleSheet();
            try {
                const headerHtml = ReactDOMServer.renderToString(
                    <StyleSheetManager sheet={sheet.instance}>
                        <I18nextProvider i18n={i18n}>
                            <DataProvider>
                                <TypeProvider>
                                    <CompareContextProvider>
                                        <SearchContextProvider>
                                            <FavoritesProvider>
                                                <MapProvider>
                                                    <App {...props} />
                                                    <MobileDetector />
                                                </MapProvider>
                                            </FavoritesProvider>
                                        </SearchContextProvider>
                                    </CompareContextProvider>
                                </TypeProvider>
                            </DataProvider>
                        </I18nextProvider>
                    </StyleSheetManager>
                );
                const styleTags = sheet.getStyleTags();
                props.initialPage.props.styleTags = styleTags;
            } catch (error) {
                // handle error
                console.error(error);
            } finally {
                sheet.seal();
            }
            return (
                <I18nextProvider i18n={i18n}>
                    <DataProvider>
                        <TypeProvider>
                            <CompareContextProvider>
                                <SearchContextProvider>
                                    <FavoritesProvider>
                                        <MapProvider>
                                            <App {...props} />
                                            <MobileDetector />
                                        </MapProvider>
                                    </FavoritesProvider>
                                </SearchContextProvider>
                            </CompareContextProvider>
                        </TypeProvider>
                    </DataProvider>
                </I18nextProvider>
            );
        },
    })
);