load all pages used causing slow loading page

I am using laravel + inertiajs + react to build a website. the problem is when when I go to the home, it loads all pages including the ones are not needed on Home. it is causing the page load slow. it should be already using code splitting, Home, About, Dashboard etc on seperate files but on network tab it loads all the pages. any idea whats wrong?

This is my Main Component for Home

import { Rocket, Bell, CheckCircle, Smartphone, LayoutDashboard } from 'lucide-react';
import { motion } from 'framer-motion';
import { Link, Head } from '@inertiajs/react';
import Footer from '@/CustomComponents/Footer';

const MainPage = () => {
....
}

then on Home.jsx

import MainPage from './MainPage';

export default function Home(props) {
    return (
        <MainPage />  
    )
}

my apps.jsx

import '../css/app.css';
import './bootstrap';

import { createInertiaApp } from '@inertiajs/react';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { createRoot, hydrateRoot } from 'react-dom/client';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import ReactGA from 'react-ga4';

const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
const queryClient = new QueryClient();

if (window.location.hostname === 'example.com' || window.location.hostname === 'www.example.com') {
    ReactGA.initialize("G-XXXX");
}

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/service-worker.js')
        .then((reg) => {
            console.log('worker registered.', reg);
        })
        .catch(err => {
            console.error('worker registration failed:', err);
        });
}

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) =>
        resolvePageComponent(
            `./Pages/${name}.jsx`,
            import.meta.glob('./Pages/**/*.jsx'),
        ),
    setup({ el, App, props }) {
        if (import.meta.env.SSR) {
            hydrateRoot(el, <App {...props} />);
            return;
        }

        createRoot(el).render(<QueryClientProvider client={queryClient}><App {...props} /></QueryClientProvider>);
    },
    progress: {
        color: '#4B5563',
    },
});