UI Library with react/styled-components (ThemeProvider problem)

i want to create my own component library for project but there is some problem with theming.

Here example of my button component. Inside we have custom LibraryThemeProvider that give StyledButton component theme colors etc:

import { MouseEventHandler, ReactNode } from 'react'
import { StyledButton } from './styled'
import { SHAPE, SIZE, VARIANT } from './constants'
import { LibraryThemeProvider } from '../../config/themes/theme-provider'

export type ButtonProps = {
  variant?: keyof typeof VARIANT
  size?: keyof typeof SIZE
  shape?: keyof typeof SHAPE
  children?: ReactNode
  onClick?: MouseEventHandler<HTMLButtonElement>
  className?: string
  disabled?: boolean
  loading?: boolean
  // iconLeft?: ElementType
  // iconRight?: ElementType
}

export const Button = (props: ButtonProps) => {
  const {
    variant = 'primary',
    size = 'medium',
    shape = 'rectangle',
    children,
    onClick,
    className,
    disabled,
    loading,
  } = props
  return (
    <LibraryThemeProvider>
      <StyledButton
        variant={variant}
        size={size}
        shape={shape}
        onClick={onClick}
        className={className}
        disabled={disabled}
        loading={loading}
      >
        {children}
      </StyledButton>
    </LibraryThemeProvider>
  )
}

My theme-provider:

import { ReactNode } from 'react'
import { ThemeProvider } from 'styled-components'
import { lightTheme } from './light-theme'

type LibraryThemeProviderProps = {
  children: ReactNode
}

export const LibraryThemeProvider = ({ children }: LibraryThemeProviderProps) => {
  return <ThemeProvider theme={lightTheme}>{children}</ThemeProvider>
}

And styled button with styled - components (not ended yet, i`m testing):

import styled from 'styled-components'
import { ButtonProps } from './button'
import { SHAPE, SIZE, VARIANT } from './constants'

export const StyledButton = styled.button<ButtonProps>`
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
  border: none;

  ${(props) => {
    switch (props.variant) {
      case VARIANT.primary:
        return `
          color: ${props.theme.colors.buttonPrimaryContent};
          background-color: ${props.theme.colors.buttonPrimaryFill}; 
        `
      case VARIANT.secondary:
        return `
            color: ${props.theme.colors.buttonSecondaryContent};
            background-color:${props.theme.colors.buttonSecondaryFill} ;
          `
      default:
        return ''
    }
  }}

  padding: 12px 24px;

  &:hover {
  }
`

Its actually working. Button received colors etc from themeprovider but something wrong because:

1. There is to much props trash and i dont know wtf is that, i dont need this (image)

2. looks like props dont see theme and dont give me any suggestions, i think its wrong and i dont know how to fix this (image)

So, i will be glad if you could help me with this or maybe there is some better way for theming UI libraries.