I am working on react.js . My requirement is to perform an API call on closing the tab. Once tab/browser is closed an event is triggered, from that triggered event an API will be called to store values in DB. I have written the code in useEffect() but the API fetches each time on button click due to this false value is stored in the DB . I have added my code . Can someone point out the mistake in my code and provide me a proper solution.

```
const [formRegistered, setFormRegistered] = useState(false)

 const initialFormState = {
    firstname: '',
    lastname: '',
    email: '',
    company: '',
    presentation: false,
    keyTakeaways: false,
    whitepaper: false,
    downloadAll: false
  }

  useEffect(() => {
    return () => {
      if( formRegistered){
         window.addEventListener("beforeunload", function(e) {
        e.preventDefault();
       let confirmationMessage =  "";
       (e || window.event).returnValue = confirmationMessage;
       handleSubmit(e)
     return confirmationMessage ; 

    });
   }
  }
  });

  function formReducer(state, action) {
    switch (action.type) {
      case 'INSERT':
        return { ...state, [action.field]: action.payload }
      default:
        return state
    }
  }
  const [formState, dispatch] = useReducer(formReducer, initialFormState)
  const updateForm = (e) => {
    if (e.target.name == 'presentation') {
      dispatch({ type: 'INSERT', field: 'presentation', payload: true })
    } else if (e.target.name == 'keyTakeaways') {
      dispatch({ type: 'INSERT', field: 'keyTakeaways', payload: true })
    } else if (e.target.name == 'whitepaper') {
      dispatch({ type: 'INSERT', field: 'whitepaper', payload: true })
    } else if (e.target.name == 'downloadAll') {
      dispatch({ type: 'INSERT', field: 'downloadAll', payload: true })
    } else {
      dispatch({ type: 'INSERT', field: e.target.name, payload: e.target.value })
    }
  }

     const handleSubmit = async (e) => {
        e.preventDefault()
        const result = await fetch('/api/sample-API', {
          method: 'POST',
          body: JSON.stringify({ response: formState, type: 'download', anonymousID: 
          anonymousID })
        })

        setFormRegistered(false)
      }

return (

  { formRegistered && <Col className='resource-download-button-container' sm={12} lg={4}>
     <a target='_blank' download href='/'>
     <Button id='resource-download-button' name='whitepaper' onClick={updateForm} 
      variant='dark'>
       Whitepaper
       </Button>
      </a>
      </Col>
     <Col className='resource-download-button-container' sm={12} lg={12}>
     <a target='_blank' download href='/'>
    <Button id='resource-download-button' name='downloadAll' onClick={updateForm} 
     variant='dark'>
      Download All
      </Button>
      </a>
      </Col>
}
)

```