Strange behavior in reactJS

I don't really know how to explain my problem so I apologize in advance if my question doesn't make sense. I have a component with a search button, depending on the mode attribute in my redux state it either renders a span which dispatches an action which updates the mode or renders a button of type submit which is bind to a specific form using the form attribute. this is my code

<div className="text-sm-end">

  {
    mode !== 'SEARCH'
      ? <span className="mdi mdi-magnify btn btn-outline-primary  sm-2 me-1" onClick={ handleSearchClick }/>
      : <Button form={ 'cost-center-form' } type="submit" className="mdi mdi-lightning-bolt sm-2 me-1"/>
  }

  <span className="mdi mdi-filter-variant btn btn-outline-primary sm-2 me-1"/>

  <Button form={ 'cost-center-form' } type="submit" className="mdi mdi-check btn btn-success sm-2 me-1"/>
</div>开发者_运维问答;

and this is my handleSearchClick function:

const handleSearchClick = () => {
  if ( mode !== 'SEARCH' )
    dispatch( switchModeSearch() );
}

the code works fine BUT when I use a Button instead of a span that's where things get really bizarre. after I click on the search button, both handleSearchClick's dispatch action and the submit event gets triggered sequentially and I can't figure out why. I hope my question is clear and I would Very Much appreciate an answer to this behavior.

So after searching for a while I came upon this question which answers my question. Here is the link: [https://stackoverflow.com/questions/71087938/dynamic-buttons-in-react-form-are-behaving-differently-when-conditionally-render]