Received `true` for a non-boolean attribute `center`.

[Anandhu1991]

Issue Check list

Received true for a non-boolean attribute center.

If you want to write it to the DOM, pass a string instead: center="true" or center={value.toString()}. at div

Describe the bug

Used 'Center' attribute to align the cell content in column

To Reproduce

GEtting the following error in console

Expected behavior

A clear and concise description of what you expected to happen.

Code Sandbox, Screenshots, or Relevant Code

Please include a codesandbox to help expedite troublshooting.

https://codesandbox.io/embed/react-data-table-sandbox-ccyuu

Otherwise, add screenshots and/or complete sample code to help explain your problem.

Versions (please complete the following information)

• React 18
• Styled Components
• OS: ubuntu
• Browser chrome,

[montanhes]

I have managed to bypass this issue creating a title component and passed css classes to it.

import React from 'react';

interface TitleProps {
  cssClass: string;
  title: string;
}

const Title: React.FC<TitleProps> = ({ cssClass, title }) => {
  return (
    <div className={cssClass}>{title}</div>
  );
};

export default Title;

And on the column name I called the component with the title and clssClass props, I also used the style with justifyContent center to center the column head:

{
  name: <Title cssClass='w-full text-center' title='Ações' />,
  cell: (row: Client) => (
    <Link to={`/clients/edit/${row.id}`} className='btn btn-circle btn-sm btn-warning'>
      <FiEdit2 />
    </Link>
  ),
  style: {
    justifyContent: "center",
  },
},

I know it's more code and work but this is the workaround I managed to archive for now.