.click() command in Cypress is not performing its function

This is my first time using Cyrpress, and I am trying to run a test for my React app. The test is after a name is entered in the modal, the submit button will be clicked and you'll be taken to the homepage. However, the .click function is not working, at least I think it isn't since the modal is still there with the name on it. Can someone tell me what I am doing wrong and how to fix it?

This is how I wrote the test:

   **fourth.spec.js**
        describe ('UI tests', () => {
            it('should navgitate to landing page after submitting with button', () =>{
                const text = "Christian"
                cy.visit('/')
                cy.get('.new').type (text).should ('have.value', text)
                .click()
            })
        })

This is how I have the button setup for my modal

 <div className="my-modal">
         <h1>Welcome!</h1>
            <p>Please enter your name</p>
               <form>  
                 <input 
                     autoFocus
                     className="new task"
                     placeholder="Name"
                     type="text" 
                     name="firstName" 
                     onChange={this.inputChange}>
                 </input>
               </form>
               <button  
                  className="modal-btn"
                  type="button" 
                   disabled={!this.state.firstName} 
                   onClick={this.displayNameHandler}>
                   Submit
               </button>
    </div>