Why i have to do “double submit” in my search form?

I’m currently working on a form that allows users to search for bills by their description, ID, or price. However, I’ve encountered an issue: after the initial search, I have to submit the form twice to get the desired results.

getBillsByIdDescriptionPrice(formState.search)
is a function that brings from de DB all the bills that match with the content from the input formState.search

The first search usually works fine. However, upon the second search, after submitting the query, it initially returns all the data instead of the specific result I’m looking for. Only after submitting the form again does it finally bring up the correct data.

Doing console logs, I noticed that during the second search, it briefly returns the correct result. However, shortly after, it reverts to displaying all the data, requiring an additional submission.

I hope someone can help me. Thanks a lot!

React with Typescript and Material UI

Link to the repo: https://github.com/guidomora/facturacion-front/blob/main/src/billing/components/BillingSearch.tsx

Here you can check the code:

 const { bills, getBillsByIdDescriptionPrice } = useContext(DataContext)
  const { formState, inputChange, search } = useFormSearch({ search: '' })

  const handleSubmit =  (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    if (formState.search === '') return
    getBillsByIdDescriptionPrice(formState.search)
    
  }

  const submitButton = () => {
    if (formState.search === '') return
    getBillsByIdDescriptionPrice(formState.search)
  }


{/* displayed data */}
      {(bills.length === 0) ? <Typography variant='h5' 
      sx={{ textAlign: 'center', color: 'black', fontWeight: 600, mt: 35 }}>
        No bills found...
      </Typography> :
        <BillingTable bills={bills} />
      }