Load Script blocked SSG in Next JS

[sercan-works]

Hello, I have a project that I set up with Next JS 12.2.2 version. There is no problem with the maps. However, when I ran SSG (Server Side Generation), which is the built-in function of Next JS, I noticed that the HTML tags did not appear, that is, SSG did not work. When I remove the component, SSG works. But it doesn't work when there is component. Can you help?

CODES:

import React, { useEffect } from 'react';
import { Provider } from 'react-redux';
import AuthContextProvider from '../context/AuthContext';
import { LoadScript } from '@react-google-maps/api';

function MyApp({ Component, pageProps }: AppProps) {
useEffect(() => {
import('preline');
}, []);

return (
<>
<LoadScript
googleMapsApiKey={process.env.NEXT_PUBLIC_GOOGLE_MAPS_KEY as string}
loadingElement={

}
id="script-loader"
>

      <ThemeProvider>
        <AuthContextProvider>
          <Provider store={store}>
            <Component {...pageProps} />
          </Provider>
        </AuthContextProvider>
      </ThemeProvider>

    </LoadScript>
 
</>

);
}

export default MyApp;

export async function getStaticProps() {
const response = await fetch(
https://api,
{
method: 'POST',

    },
  
  );
  const data = await response?.json();

if (!data) {
return {
notFound: true,
};
}

return {
props: { data },
};
}