The Flowbite Size prop only applied to text and not the div

Question

When i Apply the size prop to the button, only the text change, and the div inside stays the same width, height, and padding, ...

  <Flowbite theme={{theme}}>
    <Button color="light" pill={true} size="sm">
      <span className='group-hover:underline flex flex-nowrap flex-shrink-0'>Content</span>
      <div className='bg-red-700 rounded-[50px] py-8 px-7 w-[125px] relative h-10 ease-in-out duration-300 group-hover:bg-white border-2 group-hover:border-red-700'>
        <img src={whiteArrow} alt="White Icon" className='absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-3/5 group-hover:hidden' />
        <img src={redArrow} alt="Red Icon" className='absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-3/5 hidden group-hover:block'/>
      </div>
    </Button>
  </Flowbite>

I've tried to add classnames to the default size classnames and it didnt work

    size: {
      sm: 'text-sm div:w-[72px] div:py-5 div:px-4',
    },