Getting Value from Input Field in React JS

I have made the getting of value from the Input field but my problem is i have to put it to useEffect since I wanted that only after pressing the onSearch function that it would search. Well i can only get the value from the input by using the onChange function. When I'm still typing it already runs useEffect. How will get value from params to put it to input field so i refresh the browser it is still there? How will i fix these two issues?

Pls see my code below:

export default function Students() {
  const classes = useStyles();
  const dispatch = useDispatch();
  const students = useSelector((state) => state.student.students);
  const isLoading = useSelector((state) => state.student.isLoading);
  const totalPages = useSelector((state) => state.student.totalPages);
  const currentPage = useSelector((state) => state.student.currentPage);
  const itemsPerPage = useSelector((state) => state.student.itemsPerPage);
  const previous = useSelector((state) => state.student.previous);
  const next = useSelector((state) => state.student.next);
  const history = useHistory();
  const location = useLocation();
  const { search } = location;
  const params = new URLSearchParams(search);
  const page = params.has('page') ? parseInt(params.get('page')) : 1;
  const rowsPerPage = params.has('rowsPerPage') ? parseInt(params.get('rowsPerPage')) : 10;
  const [searchValue, setSearchValue] = React.useState('');

  const handleChangePage = (event, newPage) => {
    params.set('page', newPage + 1);
    history.push('/students?' + params.toString());
  };

  const handleChangeRowsPerPage = (event) => {
    params.delete('page');
    params.set('rowsPerPage', +event.target.value);
    history.push('/students?' + params.toString());
  };

  const onChange = (event) => {
    setSearchValue(event.target.value);
  };

  const onSearch = () => {
    params.delete('page');
    params.delete('rowsPerPage');
    params.set('key', searchValue.toString());
    history.push('/students?key=' + searchValue.toString());
    dispatch(getStudents(10, 1, searchValue.toString()));
  };

  useEffect(() => {
    dispatch(getStudents(rowsPerPage, page, ''));
  }, [page, rowsPerPage, dispatch]);

  return (
    <div>
      <div className={classes.title}>
        <h2>Students</h2>
      </div>

      <div className={classes.header}>
        <Paper component="form" className={classes.searchBarSection}>
          <InputBase
            className={classes.input}
            placeholder="Search..."
            inputProps={{ 'aria-label': 'search...' }}
            onChange={onChange}
          />
          <IconButton type="button" className={classes.iconButton} aria-label="search" onClick={onSearch}>
            <SearchIcon />
          </IconButton>
        </Paper>
      </div>

      {isLoading ? (
        <div style={{ display: 'flex', justifyContent: 'center' }}>
          <CircularProgress />
        </div>
      ) : students && students.length > 0 ? (
        <Paper className={classes.root}>
          <TableContainer className={classes.container}>
            <Table stickyHeader aria-label="sticky table">
              <TableHead>
                <TableRow>
                  <TableCell>First Name</TableCell>
                  <TableCell>Last Name</TableCell>
                  <TableCell>Actions</TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {students.map((patient, index) => (
                  <TableRow key={index}>
                    <TableCell>{patient.FirstName}</TableCell>
                    <TableCell>{patient.LastName}</TableCell>>
                    <TableCell>
                      <Button variant="contained" size="small" color="primary" startIcon={<VisibilityIcon />}>
                        View
                      </Button>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </TableContainer>
          <TablePagination
            rowsPerPageOptions={[10, 25, 100]}
            component="div"
            count={totalPages}
            rowsPerPage={itemsPerPage}
            page={currentPage - 1}
            backIconButtonProps={{
              disabled: previous === null,
            }}
            nextIconButtonProps={{
              disabled: next === null,
            }}
            onChangePage={handleChangePage}
            onChangeRowsPerPage={handleChangeRowsPerPage}
          />
        </Paper>
      ) : (
        <Typography variant="body2">No Students Available...</Typography>
      )}
    </div>
  );
}