is it normal to have "Direct source" for the most of the traffic and purchses for new website | React and Google Analytics

Question

My website here newminatis has its most traffic from direct sources, which is weird as it doesn't have good SEO practices. I'm running ads through social media and I would expect honestly to have the traffic from there, am I missing something in my implementation?

I'm using react-ga4 and Google Analytics 4.

here is how my Root looks.

import MarketShop from 'pages/index'
import FAQs from 'pages/legal/FAQs'
import PrivacyPolicy from 'pages/legal/privacyPolicy'
import ReturnPolicy from 'pages/legal/returnPolicy'
import ShippingInformation from 'pages/legal/shippingInformation'
import TermAndCondition from 'pages/legal/termsAndCondition'
import React, { lazy, Suspense } from 'react'
import {
    createBrowserRouter,
    RouterProvider,
    useLocation,
} from 'react-router-dom'
import { ToastContainer } from 'react-toastify'
import Child from './Child'
import Checkout from 'pages/checkout'
import Cart from 'pages/cart'
import Shop from 'pages/shop'
import Profile from 'pages/profile'
import Blogs from 'pages/blogs'
import OurStory from 'pages/legal/OurStory'
import BackdropLoading from 'components/loading/BackdropLoading'
import ReactGA from 'react-ga4'
import ReactPixel from 'react-facebook-pixel'
const LoginPage = lazy(() => import('pages/login'))
const ProductDetails = lazy(() => import('pages/product/[slug]'))
const Orders = lazy(() => import('pages/orders'))
const OrderDetails = lazy(() => import('pages/orders/[id]'))
const Payment = lazy(() => import('pages/payment'))
const ReviewOrder = lazy(() => import('pages/reviewOrder'))
const SignUpPage = lazy(() => import('pages/signup'))
const AddressList = lazy(() => import('pages/address'))
const AddressEditor = lazy(() => import('pages/address/[id]'))
const ReviewPage = lazy(() => import('pages/reviewPage'))

ReactGA.initialize('G-xxxxxxxx')
ReactPixel.init('xxxxxxxxxxxxx', null, {
    autoConfig: true,
    debug: true,
})
ReactPixel.pageView()

const Root = () => {
    const router = createBrowserRouter([
        {
            path: '/',
            element: <Child />,
            children: [
                {
                    path: '',
                    element: <MarketShop />,
                },
                {
                    path: 'faqs',
                    element: <FAQs />,
                },
                {
                    path: 'blogs',
                    element: <Blogs />,
                },
                {
                    path: 'terms-and-conditions',
                    element: <TermAndCondition />,
                },
                {
                    path: 'privacy-policy',
                    element: <PrivacyPolicy />,
                },
                {
                    path: 'shipping-information',
                    element: <ShippingInformation />,
                },
                {
                    path: 'return-policy',
                    element: <ReturnPolicy />,
                },
                {
                    path: 'our-story',
                    element: <OurStory />,
                },
                {
                    path: '/cart',
                    element: <Cart />,
                },
                {
                    path: '/checkout',
                    element: <Checkout />,
                },
                {
                    path: '/payment',
                    element: <Payment />,
                },
                {
                    path: '/review_order',
                    element: <ReviewOrder />,
                },
                {
                    path: '/register',
                    element: <SignUpPage />,
                },
                {
                    path: '/login',
                    element: <LoginPage />,
                },
                {
                    path: '/shop',
                    element: <Shop />,
                },
                {
                    path: '/product/:id',
                    element: <ProductDetails />,
                },
                {
                    path: '/profile',
                    element: <Profile />,
                },
                {
                    path: '/address',
                    element: <AddressList />,
                },
                {
                    path: '/address/:id',
                    element: <AddressEditor />,
                },
                {
                    path: '/address/newAddress',
                    element: <AddressEditor />,
                },
                {
                    path: '/orders',
                    element: <Orders />,
                },
                {
                    path: '/orders/:id',
                    element: <OrderDetails />,
                },
            ],
        },
        {
            path: '/review-product/:key',
            element: (
                <Suspense fallback={<BackdropLoading open={true} />}>
                    <ReviewPage />
                </Suspense>
            ),
        },
    ])

    return (
        <div className="app">
            <ToastContainer />
            <RouterProvider router={router} />
        </div>
    )
}

export default Root

Firing Event Add To Cart

 ReactGA.event('add_to_cart', {
                currency: 'USD',
                value: action.payload.price,
                items: items,
            })

Firing Event Purchase

ReactGA.event('purchase', {
                currency: 'USD',
                transaction_id: order_create.depoterOrderId,
                value: order_create.total,
            })

Appreciate any assistance!