Button refreshes page, and UseEffect not working

I have two buttons in my react.js project, when i click on the css should switch. To do this i have a onClick call to a function flip which changes the value of a state pathoButton from true to false (or vice versa). Then i have a useEffect that should only be run when pathoButton is changed and this alters the html. For some reason every time i click a button the whole page refreshes and im not sure what courses this. here is a snippet of some of the code.

where pathoButton is originally set

    const [userSettings, setuserSettings] = useState(
        {
            pathoButton: true,
        } 
    );

The two buttons which are pathologyButton and treatmentButton when the treatmentButton is clicked flip is called

return (
      <div className="input-group top-gap">
          <form className="form-length">
              <div className="input-group">
                <button className="pathologyButton">  <dt>Pathology</dt> </button>
                <button className="treatmentButton" onClick={()=>flip()}>  <dt>Treatment</dt> </button> 
              </div>
            <div className="svg-form">
                {displayAnimal()}
                  
            </div>
              
          </form>
          <form className='form-length'>
              <input type="Animal" class="animal-input" placeholder="Search by owner name or animal..." /> 
          </form>

      </div>
    );

flip and my use effect, i have tried window.location.reload(false); but it does not work

    function flip(e){
        window.location.reload(false);
        const pathoB = ! userSettings.pathoButton        
        setuserSettings((prevState) => {
            return { ...prevState, pathoButton: pathoB };
          });
    }

    useEffect(() => {
        console.log(userSettings.pathoButton, '<---lognnn')
        if (userSettings.pathoButton) {
            return (<div> 
                <button className="pathologyButton" onClick={()=>flip()}>  <dt>Pathology</dt> </button>
                <button className="treatmentButton" onClick={()=>flip()}>  <dt>Treatment</dt> </button> 
            </div>)
        } else {
            return (<div>
                <button className="treatmentButton" onClick={()=>flip()}>  <dt>Pathology</dt> </button>
                <button className="pathologyButton" onClick={()=>flip()}>  <dt>Treatment</dt> </button> 
            </div>
            )
        }
    }, [userSettings.pathoButton])

Sorry if this is a repost of a question! i dont think it is but could be as im unsure what causes the page to refresh and any help or advice would be awesome!