Reactjs – MUI unknown theme colors passed to styled

I am using mui v5 and trying to get my theme into styled() without success.

Setup I have is:

 - ThemeProvider (@mui/material/styles)` wrapped around app.
 - theme created using 'createTheme' from @mui/material/styles
 - theme assigned to theme provider
 - styled where I try to apply theme

Here is the actual code:

import { ThemeProvider } from "@mui/material/styles"
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
import { LocalizationProvider } from '@mui/x-date-pickers'
import 'react-toastify/dist/ReactToastify.css'
import { ToastContainer } from 'react-toastify'
import { Layout } from "../widgets/Layout"
import { mainTheme } from "../app/theme"
import { Provider } from "react-redux"
import { store } from './../app/store'
import { AppProps } from "next/app"
import './../app/global.css'

export default function MyApp({ Component, pageProps }: AppProps) {
    return (
        <LocalizationProvider dateAdapter={AdapterDayjs}>
            <Provider store={store}>
                <Layout>
                    <ThemeProvider theme={mainTheme}>
                        <ToastContainer
                            position="top-center"/>
                        <Component {...pageProps} />
                    </ThemeProvider>
                </Layout>
            </Provider>
        </LocalizationProvider>
    )
}

import { createTheme } from "@mui/material/styles"

declare module '@mui/material/styles' {
    interface Theme {
        dataBackground?: {
            primary: string,
            primaryHover: string,
            secondary: string,
            secondaryHover: string
        },
        defaultPagination: {
            options: number[],
            default: number
        }
    }

    interface ThemeOptions {
        dataBackground?: {
            primary: string,
            primaryHover: string,
            secondary: string,
            secondaryHover: string
        },
        defaultPagination?: {
            options: number[],
            default: number
        }
    }
}

export const mainTheme = createTheme({
    typography: {
        fontFamily: "GothamProRegular",
    },
    palette: {
        primary: {
            main: '#fff',
            light: '#fff',
            dark: '#fff',
            contrastText: '#fff',
        },
        secondary: {
            main: '#fff',
            light: '#fff',
            dark: '#fff',
            contrastText: '#fff',
        },
        error: {
            main: '#fff'
        },
        warning: {
            main: '#fff'
        },
        info: {
            main: '#fff'
        },
        success: {
            main: '#fff'
        }
    }
}, {
    dataBackground: {
        primary: '#ffffff',
        primaryHover: '#fffeee',
        secondary: '#eeeeee',
        secondaryHover: '#eeefff',
    },
    defaultPagination: {
        options: [10, 50, 100],
        default: 10
    }
})

import { User } from "@/features/userSlice/userSlice";
import { Typography, styled } from "@mui/material";

export const DividerStyled = styled(Typography)<{ user: User }>
(({ theme, user }) => (
`
    flex-grow: 1;
    text-decoration: none;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 15px;
    padding-right: 15px;
    color: ${user.isLogged ? theme.palette.secondary.main : theme.palette.primary.main};

    @media only screen and (max-width: 600px) {
        flex-grow: initial;
    }
`
))

As you can see, both seconadry.main and primary.main are #fff, however I get #1976d2 as color for primary.main and #9c27b0 for secondary.main.

What am I doing wrong?