React with JavaScript Button onClick

I need a better understanding of how JavaScript functions work with React.

I have a "Button" with an "onClick" event that I want to "reset" an "input" text field. I just can’t get it to work.

Solution: When the "Reset" button is clicked, the "SearchText" input text field is cleared of any characters.

Code

import { useCallback, useState } from 'react';
import { faMagnifyingGlass, faPeopleGroup, faBuildingUser, faArrowsRotate } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import utilStyles from '../styles/utils.module.css';

const SearchText = ({ cards, setSearchResults, setEnteredText }) => {

  const enteredText = ' ';

  const onChangex = useCallback((event) => {
    var enteredText = event.target.value;
    setEnteredText(enteredText);
  }, []);

  const onFormSubmit = (event) => {

    event.preventDefault();

  }
  
  const onChange = (event) => {

    if (!event.target.value) return setSearchResults(cards);

    const fields = ['NAME', 'CAMPUS', 'DEPARTMENT', 'JOBTITLE'];
    const query = event.target.value.toLowerCase();

    const filterData = (cards, fields, query) => {
      return cards.filter(record => fields.some(field => record[field]?.toLowerCase().includes(query)));
    };

    setSearchResults(filterData(cards, fields, query));

  }

  const onReset = (event) => {

    console.log("Clicked Reset");
    const container = document.getElementById("SearchText");
    container.reset();

  }

  const resetSearchInput = (event) => {

    console.log("Clicked");
    var enteredText = event.target.value;
    setEnteredText(enteredText);

  }


  return (
      
    <>
      
      <form id='EmployeeSearchText' onSubmit={onFormSubmit}>
        <div className="container-fluid p-3">
          <div id='Row1' className={`row ${utilStyles.divPadding}`}>
            <div id='Row1Column1' className="col">
              <div id='SearchText-container' className={utilStyles.searchBar}>
                <FontAwesomeIcon icon={faMagnifyingGlass} className={utilStyles.icon} />
                <input id='SearchText' type="text" onChange={onChange} className={`form-control ${utilStyles.inputField} ${utilStyles.inputPadding}`} name="SearchText" placeholder="Search Last Name; First Name; Campus; Deparment....." />
              </div>
            </div>
          </div>
          <div className='text-center'>
            <div id='Row2' className={`row ${utilStyles.divPadding}`}>
              <div id='Row2Column1' className="col">
                <div id='Employees-container'>
                  <button id='EmployeeListing' className={utilStyles.btnYellow}>Employees&nbsp;&nbsp;<FontAwesomeIcon icon={faPeopleGroup} /></button>
                </div>
              </div>
              <div id='Row2Column2' className="col">
                <div id='DepartmentListing-container'>
                  <button id='DepartmentListing' className={utilStyles.btnYellow} type="button">Department Listing&nbsp;&nbsp;<FontAwesomeIcon icon={faBuildingUser} /></button>
                </div>
              </div>
              <div id='Row2Column3' className="col">
                <div id='SearchTextReset-container'>
                  <button id='SearchTextReset' onClick={onReset} className={utilStyles.btnGrey} type="button">Reset&nbsp;&nbsp;<FontAwesomeIcon icon={faArrowsRotate} /></button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </form>     
      
    </>
  
  )
}

export default SearchText;