Next js - How to Update or Clear/Reset const array value?

I am Beginner to fronted development.I am working on next js project.

My task is to display result on form submit, Which i have done. Next task is to reset form and also clear/reset search result on button click. I am not able to find the solution, how do i can reset/clear that.

Here is What i have tried so far:

UPDATED

import { useForm } from 'react-hook-form';
import { useState } from "react";
import { yupResolver } from '@hookform/resolvers/yup';
import * as Yup from 'yup';

const userEndPoint = '/api/users/';
const { searchResults = [] } = [];
export default function Home() {
    const [userSearchResults, setUserSearchResults] = useState({ result: [] });
    const validationSchema = Yup.object().shape({
        searchQuery: Yup.string()
            .required('This field is required'),
    });
    const formOptions = { resolver: yupResolver(validationSchema) };
    const { errors } = formState;

    const resetFunction = async () => {
      setUserSearchResults([]);
    }

    const onSubmitFunction = async (event) => {
      console.log("search query =====> ",event.searchQuery)
      const response = await fetch(userEndPoint+event.searchQuery)
      const data = await response.json()
      searchResults = data.results;
      userSearchResults = data.results;
    };
       

    return (
        <div className="card m-3">
            <h5 className="card-header">Example App</h5>
            <div className="card-body">
                <form onSubmit={handleSubmit(onSubmitFunction)}>
                    <div className="form-row row">
                        <div className="col-6 d-flex align-items-center">
                            <input name="searchQuery" type="text" {...register('searchQuery')} className={`form-control ${errors.searchQuery ? 'is-invalid' : ''}`} /> 
                            <div className="invalid-feedback">{errors.searchQuery?.message}</div>
                        </div>
                        <div className="col-6">
                        <button type="submit" className="btn btn-primary mr-1">Search</button>
                        <button type="button" onClick={() => resetFunction()} className="btn btn-secondary">Clear</button>
                    </div>
                    </div>
                    
                </form>
            </div>
            <div className="card-body">
            <p className="card-header">Search results: </p>
            {userSearchResults}
            { <ul>
                  { searchResults.map( result => {
                    const {id, name, image} = result;
                    return (
                      <li key={id} className='card'>
                        <h3>{name}</h3>
                      </li>
                    )
                  } ) }
                </ul> }
            </div>
        </div>
    );
}

Please correct me. Highly appreciated if suggest me with best practices. Thank you!