Uncaught TypeError: Converting circular structure to JSON --> starting at object with constructor 'FiberNode'

This is the error I am getting.

```
**EventList.js:70 Uncaught TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'FiberNode'
    |     property 'stateNode' -> object with constructor 'HTMLInputElement'
    --- property '__reactInternalInstance$rpowr4rh70f' closes the circle
    at JSON.stringify (<anonymous>)
    at Object.addEvent (EventList.js:70)
    at handleSave (AddEvent.js:34)
    at HTMLUnknownElement.callCallback (react-dom.development.js:336)**
```

• It looks like the issue is with EventList line 70 and AddEvent line 34 which is here.

  EventList line 70

   ```
  //Add New Event
   addEvent(event) {
       const proxyurl = " https://secret-ocean-49799.herokuapp.com/";
       const url = SERVER_URL + '/api/v1/event';
       fetch(proxyurl + url,
           {
               method: 'POST',
               headers: {
                   'Content-Type': 'application/json',
               },
               body: JSON.stringify(event) {/*<-- Line 70*/}
           })
           .then(res => this.fetchEvents())
           .catch(err => console.error(err))
  

  }

     AddEvent line 34

import React, { useState } from 'react';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogTitle from '@material-ui/core/DialogTitle';
import Button from '@material-ui/core/Button';

const AddEvent = (props) => {
    const [open, setOpen] = useState(false);
    const [event, setEvent] = useState({
        id: '',
        title: '',
        subTitle: '',
        startDate: '',
        displayUntilDate: '',
        location: '',
        description: '',
        infoLink: ''
    });

    const handleClickOpen = () => {
        setOpen(true);
    };

    const handleClose = () => {
        setOpen(false);
    };

    const handleChange = (event) => {
        setEvent({ ...event, [event.target.name]: event.target.value });
    }

    const handleSave = () => {
        props.addEvent(event); {/*<-- Line 34 for Add Event*/}
        handleClose();
    }

    return (
        <div>
            <br />
            <button class="" variant="outlined" color="primary" onClick={handleClickOpen}
            >Add New Event
            </button>
            

            <Dialog open={open} onClose={handleClose}>
                <DialogTitle>New Event</DialogTitle>
                <DialogContent>
                    <input type="text" placeholder="Id" name="id"
                        value={event.id} onChange={handleChange} /><br />
                    <input placeholder="Title" name="title"
                        value={event.title} onChange={handleChange} /><br />
                    <input type="text" placeholder="Sub Title" name="subTitle"
                        value={event.subTitle} onChange={handleChange} /><br />
                    <input type="date" placeholder="Start Date" name="startDate"
                        value={event.startDate} onChange={handleChange} /><br />
                    <input type="date" placeholder="Display Until Date" name="displayUntilDate"
                        value={event.displayUntilDate} onChange={handleChange} /><br />
                    <input type="text" placeholder="Location" name="location"
                        value={event.location} onChange={handleChange} /><br />
                    <input type="text" placeholder="Description" name="description"
                        value={event.description} onChange={handleChange} /><br />
                    <input type="text" placeholder="Info Link" name="infoLink"
                        value={event.infoLink} onChange={handleChange} /><br />
                </DialogContent>
                <DialogActions>
                    <button onClick={handleClose}>Cancel</button>
                    <button onClick={handleSave}>Save</button>
                </DialogActions>
            </Dialog>
        </div>
    );
};

export default AddEvent;
```

From what I understand Circular Data occurs when you have an object that references some other parent object and if JSON.stringify printed the circular data, the string would be infinity.

So, it looks like the Stringify function is causing the issue but, I do not see how it is referencing a parent object.

At first I though it was because of the id value that is included but, also auto serialized as new objects are added. I removed the parts of code that interacted with the Id information but, that did not work.