Preferred way to handle reinitialise of debounce(lodash) timer before timer limit is crossed

Question

In react, preferred way to handle reinitialise of debounce timer, if the event triggers it again before timer ends.

should it be used using usecallback like this: const debouncedHandler = useCallback( debounce(handler, 1000) , []);

or should we explicitly cancel the previous debounce using .cancel method.

**Using usecallback() **

import React, { useState, useCallback } from 'react';
import debounce from 'lodash/debounce';

function SearchInput() {
  const [searchTerm, setSearchTerm] = useState('');
  
  // Define a function to perform the actual search
  const performSearch = useCallback((searchQuery) => {
    console.log('Searching for:', searchQuery);
    // Perform your search logic here, e.g., make an API request
  }, []);
  
  // Create a debounced version of the search function
  const debouncedSearch = useCallback(
    debounce(performSearch, 5000), // Adjust the debounce delay as needed
    []
  );

  // Handle changes to the search input
  const handleSearchChange = (event) => {
    const query = event.target.value;
    setSearchTerm(query);
    debouncedSearch(query); // This will be delayed by 5000ms
  };

  return (
    <div>
      <input
        type="text"
        placeholder="Search..."
        value={searchTerm}
        onChange={handleSearchChange}
      />
    </div>
  );
}

export default SearchInput;

Next below, if we use .cancel from lodash debounce method

import React, { useState, useEffect } from 'react';
import debounce from 'lodash/debounce';

function App() {
  const [searchTerm, setSearchTerm] = useState('');

  // Define a function to perform the actual search
  const performSearch = (searchQuery) => {
    console.log('Searching for:', searchQuery);
    // Perform your search logic here, e.g., make an API request
  };

  useEffect(() => {
  // Ensure searchTerm has a value before starting the debounced search
  if (searchTerm) {
    // Create a debounced version of the search function with a 5000ms (5 seconds) delay
    const debouncedSearch = debounce(performSearch, 5000);

    // Call debouncedSearch when the searchTerm changes
    debouncedSearch(searchTerm);

    // Cleanup the debounced function
    return () => debouncedSearch.cancel();
  }
}, [searchTerm]);


  // Handle changes to the search input
  const handleSearchChange = (event) => {
    const query = event.target.value;
    setSearchTerm(query);
  };

  return (
    <div className="App">
      <h1>Debounced Search Example</h1>
      <input
        type="text"
        placeholder="Search..."
        value={searchTerm}
        onChange={handleSearchChange}
      />
    </div>
  );
}

export default App;

Both the code above is provided to give the idea of achieving the same goal of executing the console statement only once after the given time delay. As long as user keeps entering the words in input box which eventually resets the debounce timer and then if user stops, after 5 secs the console statement should print and only once with all the words from input box. Thanks.