eeee

const Sell: React.FC = () => {
  const { sellRecord} = React.useContext(mdtContext) as SpotContext;
  const [progress, setProgress] = React.useState(true);
  const [rows, setRows] = React.useState<SellProps[]>(sellRecord);
  const rowss = rows.map((data) => {
    return createData(data.name, data.vehPrice, data.model, data.plate, data.financed, data.date)
  })

  React.useEffect(() => {
    setProgress(false)
  }, []);

  const requestSearch = (searchedVal: string) => {
    const filteredRows = sellRecord.filter((row) => {
      return row.name.toLowerCase().includes(searchedVal.toLowerCase()) || row.plate.toLowerCase().includes(searchedVal.toLowerCase());
    });
    setRows(filteredRows);
  };
  
  return (
    <Box
      sx={{height:'93%', width:'88%', position:'absolute',right:0, bottom:0}}
    >
      {progress && <CircularProgress size={120} sx={{position:'absolute', top:'40%', left:'45%', transform: 'translate(-50%, -50%)'}} disableShrink={true}/>}
      <Search>
        <SearchIconWrapper>
          <SearchIcon />
        </SearchIconWrapper>
        <StyledInputBase
         onChange={(event) => requestSearch(event.target.value)}
          placeholder="Search…"
          inputProps={{ 'aria-label': 'search' }}
        />
      </Search>
      <TableContainer component={Box} sx={{display: 'flex', position:'relative', top:'6.2%', left:'5%', width:'90%', overflowY:'auto', maxHeight:'90%',bgcolor:'rgba(43, 55, 79, 0.9)'}}>
        {!progress && <Table aria-label="collapsible table">
          <TableHead sx={{position: "sticky", top: 0, zIndex:3,bgcolor:'rgb(43, 55, 79)'}}>
            <TableRow>
              <TableCell sx={TextColor}>Users</TableCell>
              <TableCell sx={TextColor} align="right">Purchase Price</TableCell>
              <TableCell sx={TextColor} align="right">Model</TableCell>
              <TableCell sx={TextColor} align="right">License Plate</TableCell>
              <TableCell sx={TextColor} align="right">Financed</TableCell>
              <TableCell sx={TextColor} align="right">Brought Date</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {rowss.map((row, index) => (
              <Row key={index} row={row} />
            ))}
          </TableBody>
        </Table>}
      </TableContainer>
    </Box>
  )
}