when using props in styled component it works well but shows warning (Warning: Received `true` for a non-boolean attribute `cen` )

Question

Warning: Received "true" for a non-boolean attribute "cen" If you want to write it to the DOM, pass a string instead: cen="true" or cen={value.toString()}. When i using Props in Styled-Component with typescript and Material-UI it works well but shows warning

import React from 'react'  
import styled from 'styled-components';
import { Button } from '@material-ui/core';

interface Cnt {
  cen?: boolean
}
const Bnt3 = styled(Button)`
&&{
  ${(props:Cnt) => props.cen && 'display: block;'}
  margin: 30px auto;
  border-radius: 24px;
  padding: 8px 28px;
}
`
const Test: React.FC = () => {
  return (
    <>
    <Bnt3 cen variant="contained" type="button" color="secondary" >Log In</Bnt3>
    <Bnt3 variant="contained" type="button" color="secondary">Log In</Bnt3>
    </>
  ); 
}
export default Test;

Answer 1

it's a kind of data type error.! so i try to fix with string type instead of Boolean.

import React from 'react'  
import styled from 'styled-components';
import { Button } from '@material-ui/core';

interface Cnt {
  cen?: string
}
const Bnt3 = styled(Button)`
&&{
  ${(props:Cnt) => props.cen && 'display: block;'}
  margin: 30px auto;
  border-radius: 24px;
  padding: 8px 28px;
}`

const Test: React.FC = () => {
  return (
    <>
    <Bnt3 cen='true' variant="contained" type="button" color="secondary" >Log In</Bnt3>
    <Bnt3 variant="contained" type="button" color="secondary">Log In</Bnt3>
    </>
  ); 
}
export default Test;