I am building a site based on Next.js (React | TSX) & Material-UI library. I customize some of my components, and I'd like to ask about using <div> wrappers around my components, like:

export const component = /** JSX below */

<Fragment>
  <div className={classes.root}>
    <MUIDataTable
      data={data.feed}
      columns={columns}
      options={options}
    />
  </div>
</Fragment>

Most of the components look something like that. I use divs to pass custom css style via className property. So the question is, does it ok to wrap my components, or is it not?

I have not so much experience with the front-end, so I don't know the best practices with MUI & React. Probably there is some kind of component, that I should use instead of <div>?