Reactjs remove reductant border from transition-group derived div

Question

I tried to create an animated scrolling table through Reactjs and mui, I apply "react-transition-group" into the table component so that the table rows can ease in & out by sequence, while the transition group automatically generate few new divs (I guess it's used for the collapse animation) and those div seems carrying the white bottom border, I would like to know how to remove those white border or revise it to a proper color.

Please find the image and code below for your information. Please also ignore some unnecessary import in the coding part.

Many thanks.

import React , {useState , useEffect} from 'react';
import {
    Typography, Box,
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableRow,
    Chip,
    Card,
    CardContent
} from '@mui/material';
import { borders } from '@mui/system';
import DashboardCard from './realtime_Table_Component';
import { TransitionGroup } from 'react-transition-group';
import Collapse from '@mui/material/Collapse';

import { baselightTheme } from "./theme";
import { CssBaseline, ThemeProvider } from '@mui/material';
import './style2.css';
import Divider from '@mui/material/Divider';

const products = [
    {
        id: "1",
        name: "Sunil Joshi",
        post: "Web Designer",
        pname: "Elite Admin",
        priority: "Low",
        pbg: "primary.main",
        budget: "3.9",
    },
    {
        id: "2",
        name: "Andrew McDownland",
        post: "Project Manager",
        pname: "Real Homes WP Theme",
        priority: "Medium",
        pbg: "secondary.main",
        budget: "24.5",
    },
    {
        id: "3",
        name: "Christopher Jamil",
        post: "Project Manager",
        pname: "MedicalPro WP Theme",
        priority: "High",
        pbg: "error.main",
        budget: "12.8",
    },
    {
        id: "4",
        name: "Nirav Joshi",
        post: "Frontend Engineer",
        pname: "Hosting Press HTML",
        priority: "Critical",
        pbg: "success.main",
        budget: "2.4",
    },
    {
        id: "5",
        name: "aaaaa",
        post: "Frontend Engineer",
        pname: "Hosting Press HTML",
        priority: "Critical",
        pbg: "success.main",
        budget: "2.4",
    },{
        id: "6",
        name: "bbbbb",
        post: "Frontend Engineer",
        pname: "Hosting Press HTML",
        priority: "Critical",
        pbg: "success.main",
        budget: "2.4",
    },{
        id: "7",
        name: "cccccccc",
        post: "Frontend Engineer",
        pname: "Hosting Press HTML",
        priority: "Critical",
        pbg: "success.main",
        budget: "2.4",
    },{
        id: "8",
        name: "sdddddddd",
        post: "Frontend Engineer",
        pname: "Hosting Press HTML",
        priority: "Critical",
        pbg: "success.main",
        budget: "2.4",
    },{
        id: "9",
        name: "eeeeeee",
        post: "Frontend Engineer",
        pname: "Hosting Press HTML",
        priority: "Critical",
        pbg: "success.main",
        budget: "2.4",
    },{
        id: "10",
        name: "ffffffdasfdsf",
        post: "Frontend Engineer",
        pname: "Hosting Press HTML",
        priority: "Critical",
        pbg: "success.main",
        budget: "2.4",
    },{
        id: "11",
        name: "ffffffdasfdsf",
        post: "Frontend Engineer",
        pname: "Hosting Press HTML",
        priority: "Critical",
        pbg: "success.main",
        budget: "2.4",
    },{
        id: "12",
        name: "ffffffdasfdsf",
        post: "Frontend Engineer",
        pname: "Hosting Press HTML",
        priority: "Critical",
        pbg: "success.main",
        budget: "2.4",
    },{
        id: "13",
        name: "ffffffdasfdsf",
        post: "Frontend Engineer",
        pname: "Hosting Press HTML",
        priority: "Critical",
        pbg: "success.main",
        budget: "2.4",
    },{
        id: "14",
        name: "ffffffdasfdsf",
        post: "Frontend Engineer",
        pname: "Hosting Press HTML",
        priority: "Critical",
        pbg: "success.main",
        budget: "2.4",
    },{
        id: "15",
        name: "ffffffdasfdsf",
        post: "Frontend Engineer",
        pname: "Hosting Press HTML",
        priority: "Critical",
        pbg: "success.main",
        budget: "2.4",
    },{
        id: "16",
        name: "ffffffdasfdsf",
        post: "Frontend Engineer",
        pname: "Hosting Press HTML",
        priority: "Critical",
        pbg: "success.main",
        budget: "2.4",
    },{
        id: "17",
        name: "ffffffdasfdsf",
        post: "Frontend Engineer",
        pname: "Hosting Press HTML",
        priority: "Critical",
        pbg: "success.main",
        budget: "2.4",
    },{
        id: "18",
        name: "ffffffdasfdsf",
        post: "Frontend Engineer",
        pname: "Hosting Press HTML",
        priority: "Critical",
        pbg: "success.main",
        budget: "2.4",
    },{
        id: "19",
        name: "ffffffdasfdsf",
        post: "Frontend Engineer",
        pname: "Hosting Press HTML",
        priority: "Critical",
        pbg: "success.main",
        budget: "2.4",
    },{
        id: "20",
        name: "ffffffdasfdsf",
        post: "Frontend Engineer",
        pname: "Hosting Press HTML",
        priority: "Critical",
        pbg: "success.main",
        budget: "2.4",
    },
];


function renderItem({ product, func }) {
    return (
    <Table style={{marginTop:0}} sx={{ border:0,  background: '#495882'}}>
        <TableBody >
            <TableRow key={product.name} sx={{height:78 }}>
                <TableCell style={{width:'30%'}} sx={{m:0, padding:1}}>
                    <Box
                        sx={{
                            display: "flex",
                            alignItems: "center",
                        }}
                    >
                        <Box>
                            <Typography /*style={{color:'rgb(234, 239, 244)'}}*/ variant="subtitle2" fontWeight={600}>
                                {product.name}
                            </Typography>
                            <Typography
                                color="textSecondary"
                                sx={{
                                    fontSize: "13px",
                                }}
                            >
                                {product.post}
                            </Typography>
                        </Box>
                    </Box>
                    
                </TableCell>
                
                <TableCell style={{width:'35%'}} sx={{m:0, padding:1}}>
                    <Typography color="textSecondary" variant="subtitle2" fontWeight={400}>
                        {product.pname}
                    </Typography>
                    
                </TableCell>
              
                <TableCell align='center' style={{width:'20%'}}>
                    <Chip
                        sx={{
                            px: "4px",
                            backgroundColor: product.pbg,
                            color: "#fff",
                        }}
                        size="small"
                        label={product.priority}
                    ></Chip>
                    
                </TableCell>
                
                <TableCell style={{width:'15%'}}>
                    <Typography variant="subtitle2" fontWeight={600}>${product.budget}k</Typography>
                </TableCell>
                
            </TableRow>
            <Divider component={null} style={{width:'100%'}} />
        </TableBody>
        
    </Table>
    
    );
  }


const ProductPerformance = () => {

    const [recomm, setRecomm] = React.useState(products.slice(0, 5));
    const [order , setOrder] = React.useState(1);
    const theme = baselightTheme;

    useEffect(()=> {
        const interval = setInterval(
         ()=>{
          /*const nextHiddenItem = getRandomItem(FRUITS);*/
          setOrder(prev => prev + 0);
          } , 2000
        )
        return () => clearInterval(interval);
      } , []
      )
    
      useEffect(() => {
        const dataArr = [...products.slice(order, order + 5)];
        console.log(dataArr);
        setRecomm((prev) => dataArr)
      }, [order])


    return (
        <ThemeProvider theme={theme}>
        <CssBaseline />
            <Card
                sx={{ padding: 0 , mt: 0 }}
                elevation={9}
                variant="outlined"
                style={{height: '400px'}}
            >
                <CardContent sx={{ p: "5px" }}>
                    
                            <TransitionGroup component={null} className="testing">
                                    {recomm.map((product) => (
                                        <Collapse  component={null} key={product.id}>{renderItem({ product })}</Collapse>
                                        
                                    ))}
                            </TransitionGroup>
                    
                </CardContent>
                
            </Card>
        </ThemeProvider>
    );
};

export default ProductPerformance;