Unable to update state variables after fetch in ReactJS

On form submit, a new event is added in the Database and the details of this new event are returned back via JSON. I want to concatenate this new JSON in the 'events' data so that the 'events' data gets updated automatically. But it is not working. Here is my code. Please see the line commented as //Here. It is where I am trying to update the event state variable but it is not getting updated.

import React, { useState,useEffect } from 'react';

async function getAllEvents() {
    return fetch('http://localhost:8080/get-all-events/', {
      method: 'GET',
      //body: JSON.stringify(credentials)
    })
      .then(
          data => data.json()
        )
   }


export default function Dashboard() {

    const [events, setEvents ] = useState({});
    const [eventName, setEventName] = useState();

    useEffect(() => {
        getEventsWithFetch();
      }, []);

    const getEventsWithFetch = async () => {
        const response = await fetch("http://localhost:8080/get-all-events/");
        const jsonData = await response.json();
        setEvents(jsonData);
      };


      const addEvent = async (name) => {
        const response = await fetch("http://localhost:8080/create-event/",

        {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                "title": name,
                "day": "1",
                "month": "2"
              })
          }
        
        ).then((response) => response.json())
        .then((json) => {
           
            events.push(json);
        
            var events_array = events;
            
            setEvents(events_array); //Here

           
      })      
      };  

      const handleSubmit = async e => {
        e.preventDefault();
       var data = new FormData(e.target)

      }

  return(
    <div>
      <p>EVENTS DASHBOARD</p>
      {JSON.stringify(events)}
      <form onSubmit={handleSubmit}>
      <label>
        <p><b>Event Name</b></p>
        <input type="text" name="event_name" onChange={e => setEventName(e.target.value)} />
      </label>
      <div>
        <button type="submit">Submit</button>
      </div>
    </form>
    </div>
  );
}