value not loading initially in datagrid

I'm trying to fetch data using api and show the data in my datagrid. but initially the data is not loading. though I can get the data, and I don't know why it doesn't show in the datagrid. What I'm actually doing is, I have a common function for datagrid along with search option in one file. I'm getting the getting the data in another file. Now everytime I make a change and save the file, it shows the data, but when I refresh the page the data is not showing again. kindly help me figure out. Thanks in advance

this the code where I'm getting the data

    const columns = [
  { field: 'role', headerName: 'Role', },
  { field: 'counterParty', headerName: 'Counter Party', },
  { field: 'tokens', headerName: 'Token', },
  { field: 'date', headerName: 'Date', },
  { field: 'comment', headerName: 'Comments', }
];

export default function TransactionCard(props) {
  const [TransactionData, setTransactionData] = useState([]);
  const [loading, setLoading] = useState(true);

  // setLoading(loading, true);

  useEffect(() => {
    axios.get('http://localhost:8006/api/v2/user/transactions').then(function (res) {
      try {
        var result = res.data;
        // console.log(result.data.data)
        setTransactionData(result.data.data)
        // setLoading(false);
      }
      catch (error) {
        console.log(error)
      }
    })
  }, [])
  console.log(TransactionData)
  return (
    <>
      <Card {...props}>
        <CardContent>
          <DataGridHelper title='Transaction' rows={TransactionData} columns={columns} />
        </CardContent>
      </Card>
    </>
  );
}

This is Where I'm getting the data

    const DataGridHelper = ({ rows, columns, title }) => {
     const [platform, setPlatform] = useState([]);
     const [searchText, setSearchText] = useState('');
     const [Rows, setRows] = useState([]);

     useEffect(() => {
          setPlatform(rows);
          setRows(rows);
     }, []);

     console.log(Rows);
     function escapeRegExp(value) {
          return value.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
     }
     const requestSearch = (searchValue) => {
          const searchRegex = new RegExp(escapeRegExp(searchValue), 'i');
          const filteredRows = platform.filter((row) => {
               return Object.keys(row).some((field) => {
                    return searchRegex.test(row[field].toString());
               });
          });
          setRows(filteredRows);
     };

     console.log(rows)
     return (
          <>
               <Stack direction="row" alignItems="center" justifyContent='space-between' gap={1}>
                    <Stack direction="row" alignItems="center" gap={1}>
                         <RuleIcon sx={{ color: "text.secondary" }} />
                         <Typography sx={{ fontSize: 16, fontWeight: 'bold' }} color="text.secondary" gutterBottom>
                              {title}
                         </Typography></Stack>
                    <Box sx={{ flexDirection: 'column' }}>
                         <TextField
                              variant="outlined"
                              size='small'
                              value={searchText}
                              onChange={(e) => { setSearchText(e.target.value); requestSearch(e.target.value) }}
                              placeholder="Search..."
                              InputProps={{
                                   startAdornment: <SearchIcon fontSize="small" color="action" />,
                                   endAdornment: (
                                        <IconButton
                                             title="Clear"
                                             aria-label="Clear"
                                             size="small"
                                             style={{ visibility: searchText ? 'visible' : 'hidden', borderRadius: "57%", paddingRight: "1px", margin: "0", fontSize: "1.25rem" }}
                                             onClick={(e) => { setSearchText(''); setRows(platform) }}
                                        >
                                             <ClearIcon fontSize="small" color="action" />
                                        </IconButton>
                                   ),
                              }}
                              sx={{
                                   width: { xs: 1, sm: 'auto' }, m: (theme) => theme.spacing(1, 0.5, 1.5),
                                   '& .MuiSvgIcon-root': {
                                        mr: 0.5,
                                   },
                                   '& .MuiInput-underline:before': {
                                        borderBottom: 1,
                                        borderColor: 'divider',
                                   },
                              }}
                         />
                    </Box>
               </Stack>
               <div style={{ height: 250, width: '100%' }}>
                    <DataGrid
                         disableColumnMenu
                         rows={Rows}
                         columns={columns}
                         pageSize={10}
                         rowsPerPageOptions={[10]}
                    />
               </div>
          </>
     );
}
export default DataGridHelper

this is the data I'm getting initially