In Typescript, what should the return type be for a component returning MUI TableContainer?

My component is returning a MUI Table, wrapped inside TableContainer

const DataReleaseChart = (): React.FC<?> => {
  return (
    <TableContainer
      sx={{
        display: 'grid',
        rowGap: 7,
      }}
    >
      <Table>{chartRenderer(preCloseRowData)}</Table>
      <Table>{chartRenderer(closedRowData)}</Table>
    </TableContainer>
  );
};

export default DataReleaseChart;

What should be the returned Type?

I have tried ReactElement[] but it gives the error of

Type 'Element' is missing the following properties from type 'ReactElement<any, string | JSXElementConstructor<any>>[]': length, pop, push, concat, and 29 more.ts(2740)

I have also tried React.FC but got this

Type 'Element' is not assignable to type 'FC<{}>'.
  Type 'Element' provides no match for the signature '(props: { children?: ReactNode; }, context?: any): ReactElement<any, any>'.ts(2322)

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

**You can use ReactNode and make sure when declare function then you have to put :FC **

import React, { FC, ReactNode } from "react";   
    
 const DataReleaseChart:FC<ReactNode> = () => {
  return (
    <TableContainer
      sx={{
        display: 'grid',
        rowGap: 7,
      }}
    >
      <Table>{chartRenderer(preCloseRowData)}</Table>
      <Table>{chartRenderer(closedRowData)}</Table>
    </TableContainer>
  );
};

export default DataReleaseChart;

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0