Tailwind-Styled-Component: Received `true` for a non-boolean attribute `block`

It seems like props are passed as an attribute and when I pass boolean, It throws error on the console. I am using next.js with typescript.

This is the error

Warning: Received `true` for a non-boolean attribute `block`.

If you want to write it to the DOM, pass a string instead: block="true" or block={value.toString()}.
button
functionTemplate/</<@webpack-internal:///./node_modules/tailwind-styled-components/dist/tailwind.js:34:101

Component looks like this

import tw from 'tailwind-styled-components';

interface Props {
  layout?: 'primary' | 'outline';
  disabled?: boolean;
  block?: boolean;
  size?: 'small' | 'medium' | 'large';
}

const Button = tw.button`
  flex justify-center items-center border border-solid font-medium rounded-sm transition-all duration-300 ease-in-out

  ${(props: Props) =>
    props.layout === 'primary' &&
    'border-primary-400 bg-primary-400 text-white hover:bg-primary-500 hover:border-primary-600'}
  ${(props: Props) =>
    props.layout === 'outline' &&
    'border-gray-300 text-gray-700 hover:border-blue-500 hover:text-blue-500'}

  ${(props: Props) =>
    props.disabled && 'bg-gray-50 border-gray-200 text-gray-200'}
    
  ${(props: Props) => props.size === 'small' && 'px-2 py-2 text-xs'}
  ${(props: Props) => props.size === 'medium' && 'px-4 py-3 text-xs'}
  ${(props: Props) => props.size === 'large' && 'px-5 py-4 text-lg'}
  
  ${(props: Props) => props.block && 'w-full'}
`;

export default Button;

The workaround is using number as boolean block ? 1 : 0