How can I expand the row only when that row was clicked?

I have this materia-ui table. Every time I’ll click the button to expand the row1, it will also expand the second row. How can I fix this where only that specific row will expand?

<Table stickyHeader aria-label="sticky table">
    <TableRow hover>
      <TableCell>Created Date</TableCell>
  {data &&
   data((index) => (
    <TableRow hover>
          aria-label="expand row"
          onClick={() => setOpen(!open)}
          {open ? (
            <KeyboardArrowUpIcon />
          ) : (
            <KeyboardArrowDownIcon />
        <TableCell component="th" scope="row">
        <TableCell component="th" scope="row">
          {new Date(
            index.createdDate.seconds * 1000
        <TableCell colSpan={6}>
          <Collapse in={open} timeout="auto" unmountOnExit>


Wrap TableRow in a component

const Row = ({item}) => {
  const [open, setOpen] = useState(false);

  return <TableRow>...</TableRow>

  {, index) => (
    <Row key={index} item={item} />

Edit table-collapse