Cannot read properties of null (reading 'style') and "Verification code is incorrect" error in React code

Question

I am building an integration on our site where a client will subscribe for a monthly service, and we need to verify their phone number by letting them submit their mobile number, then they will receive a pin to their number and then they would enter this pin on the page and get a verification message. I am encountering an error that reads "Cannot read properties of null (reading 'style')" and an alert window pops up saying "Verification code is incorrect", though when testing the pin on the backend system which processes the JSON data, I get 200 OK from the server. The error occurs when I submit the form for phone number verification. Part of the code was suggested by chatGPT.

Here is the relevant code (Note: I have changed the imsi to a bogus number as well as the api server address to avoid potential public exploits):

import React, { useState, useEffect } from 'react';
import { Formik, Field, Form, ErrorMessage } from 'formik';
import * as Yup from 'yup';
import axios from 'axios';

const phoneRegExp = /^\d{9}$/;

const initialValues = {
    name: '',
    email: '',
    phoneNumber: '',
    verificationCode: '',
};

const validationSchema = Yup.object({
    name: Yup.string().required('Name is required'),
    email: Yup.string().email('Invalid email address').required('Email is required'),
    phoneNumber: Yup.string().matches(phoneRegExp, 'Phone number must be 9 digits').required('Phone number is required'),
});

const verificationSchema = Yup.object({
    verificationCode: Yup.string().required('Verification code is required'),
});

// START OF VERIFY FUNCTION
const VerifyAxios = () => {
    const [verificationCode, setVerificationCode] = useState('');
    const [isSubmitting, setIsSubmitting] = useState(false);
    const [submitError, setSubmitError] = useState(null);
    const [sentCode, setSentCode] = useState(null);

    // This useEffect hook listens for changes to the verificationCode state.
    useEffect(() => {
        console.log('Verification Code:', verificationCode);
    }, [verificationCode]);

    const handlePhoneNumberSubmit = async (values, { setSubmitting }) => {
        try {
            const data = {
                imsi: '000702735444444',
                countryCode: '34',
                phoneNumber: values.phoneNumber,
            };
            const response = await axios.post('http://api-m-dev.testing.host:8082/jack.a/api1/1.2.0/requestSimCode', data);
            setSubmitting(false);
            setVerificationCode(response.data.verifCode);
            console.log(response.data.verifCode);
            setSubmitError(null);
            setSentCode(response.data.verifCode);
            initialValues.phoneNumber = values.phoneNumber;
            document.getElementById('phoneNumberForm').style.display = 'none';
            document.getElementById('verificationCodeForm').style.display = 'block';
        } catch (error) {
            setSubmitting(false);
            setVerificationCode('');
            setSubmitError(error.message);
            setSentCode(null);
            console.log(error);
        }
    };

    const handleVerificationCodeSubmit = async (values, { setSubmitting }) => {
        try {
            const data = {
                imsi: '000702735444444',
                countryCode: '34',
                phoneNumber: initialValues.phoneNumber,
                verifCode: values.verificationCode,
            };
            const response = await axios.post('http://api-m-dev.testing.host:8082/jack.a/api1/1.2.0/verifySimCode', data);
            // The purpose of setSubmitting is to manage the submit button state while the form is being submitted. By setting the state to false, the submit button is re-enabled after the submission is complete.
            setSubmitting(false);
            // setSubmitError is used to manage any submission errors that may occur while the form is being submitted. By setting the state to null, any previously set error state is cleared, and the component is reset to its initial state.
            setSubmitError(null);
            if (response.data.resultCode === '200' && sentCode === values.verificationCode) {
                alert('Success, your number is verified');
            } else {
                alert('Verification code is incorrect');
            }
        } catch (error) {
            setSubmitting(false);
            setSubmitError(error.message);
            alert('Wrong phone number or verification code');
        }
    };

    return (
        <div>
            <h1>Phone Service Subscription</h1>
            {submitError && <div className='error-message'>{submitError}</div>}
            <Formik id='phoneNumberForm' initialValues={initialValues} validationSchema={validationSchema} onSubmit={handlePhoneNumberSubmit}>
                {({ isSubmitting }) => (
                    <Form>
                        <label htmlFor='name'>Name:</label>
                        <Field id='name' name='name' type='text' />
                        <ErrorMessage name='name' />
                        <label htmlFor='email'>Email:</label>
                        <Field id='email' name='email' type='email' />
                        <ErrorMessage name='email' />
                        <label htmlFor='phoneNumber'>Phone Number:</label>
                        <Field id='phoneNumber' name='phoneNumber' type='tel' />
                        <ErrorMessage name='phoneNumber' />

                        <button type='submit' disabled={isSubmitting}>
                            {isSubmitting ? 'Submitting...' : 'Submit'}
                        </button>
                    </Form>
                )}
            </Formik>

            <Formik
                id='verificationCodeForm'
                initialValues={initialValues}
                validationSchema={verificationSchema}
                onSubmit={handleVerificationCodeSubmit} // Add this line
            >
                {({ isSubmitting }) => (
                    <Form>
                        <label htmlFor='verificationCode'>Verification Code:</label>
                        <Field id='verificationCode' name='verificationCode' type='text' />
                        <ErrorMessage name='verificationCode' />

                        <button type='submit' disabled={isSubmitting}>
                            {isSubmitting ? 'Submitting...' : 'Submit'}
                        </button>
                    </Form>
                )}
            </Formik>
        </div>
    );
};

export default VerifyAxios;

The error appears to be occurring in the handlePhoneNumberSubmit function in the try block, specifically on this line:

document.getElementById('phoneNumberForm').style.display = 'none';

I am not sure what is causing this error or how to resolve it. Any help would be greatly appreciated!