Unable to disable button on form submit (javascript, html, css)

Question

I am trying to disable a button after it is clicked, but it is not holding its disabled tag. Another weird thing is that if I click the button twice it will disable. Code below

const [loading, setLoading] = useState('Submit');
...

<form onSubmit={(event) => {
    event.preventDefault();
    submitBet(units, line, team, gameID);
    }}> 
    ...
    <button type='submit' className='submit-betslip' id='submit-button-id'>{loading}.</button>
</form>

The loading variable is a useState. The onSubmit function:

    const submitBet = async (units, line, team, id) => {
        if (Number(units) === 0 && Number(line) === 0) {
          console.log('Empty input');
          return
        }
        try {
          document.getElementById('submit-button-id').disabled = true;
        }
        ...
        }

Not sure if it matters but the form is within a React function. Any thoughts?