Dynamic fields having issue saving to DB through endpoint

i have issue saving this through the endpoint when i tried to get this done specifying null on each models fields in the backend the rest of the code works fine, but this particular area of the code dynamic fields isn't save to database, Uncaught ReferenceError: data is not defined

import React, {useState} from 'react'
const [inputField, setInputFields] = useState([
{vin:'', year:'', make:'', model:'', vtype:'', qty:'', color:'', plate:'', lot:'', 
vstate:'', info:''}
])
const handleChangeInput= (index, event) => {
const values = [...inputField]
values[index][event.target.name] = event.target.value;
setInputFields(values)
console.log(index, values)
}
const handleAddField = () => {
const newFields ={vin:'', year:'', make:'', model:'', vtype:'', qty:'', color:'', 
plate:'', lot:'', vstate:'', info:''}
setInputFields([...inputField, newFields])
}
const handleRemoveField = (index) => {
const values = [...inputField];
values.splice(index, 1);
setInputFields(values);
}
const handleSubmit = (e) => {
e.preventDefault()
const postData = {
vin: inputField.vin, year: inputField.year, make: inputField.make, 
model: inputField.model, vtype: inputField.vtype, qty: inputField.qty, 
color: inputField.color, plate: inputField.plate, lot: inputField.lot, 
vstate: inputField.vstate, info: inputField.info, 
}
fetch('http://127.0.0.1:8000/api/post/', {
method: 'POST',
headers: {
"Content-type": "application/json"
},
body: JSON.stringify(postData)
}).then(response => response.json())
.then(data = console.log(data))
.catch(error => console.log(error))
}

this is the part for the jsx

    {inputField.map((inputField, index) => (
<div key={index} className="card-body">
<div className="col-sm-12">
<div className="form-group">
<label htmlFor="inputVin"></label>
<input 
type="text" 
id="inputVin" 
value={inputField.vin}
placeholder="Vin Number" 
className="form-control" 
name="vin"
onChange={event => handleChangeInput(index, event)}
/>
</div>
</div>
<div className="row">
<div className="col-sm-2">
<div className="form-group">
<label htmlFor="inputYear"></label>
<input 
type="text" 
id="inputYear" 
placeholder="* Year" 
value={inputField.year}
className="form-control" 
name="year"
onChange={event => handleChangeInput(index, event)}
/>
</div>
</div>
<div className="col-sm-3">
<div className="form-group">
<label htmlFor="inputMake"></label>
<input 
type="text" 
id="inputMake" 
placeholder="* Make" 
value={inputField.make}
className="form-control" 
name="make"
onChange={event => handleChangeInput(index, event)}
/>
</div>
</div>
<div className="col-sm-3">
<div className="form-group">
<label htmlFor="inputModel"></label>
<input 
type="text" 
id="inputModel" 
placeholder="* Model" 
className="form-control" 
value={inputField.model}
name="model"
onChange={event => handleChangeInput(index, event)}
/>
</div>
</div>
<div className="col-sm-3">
<div className="form-group">
<label htmlFor="inputType"></label>
<select 
id="inputType" 
value={inputField.vtype}
className="form-control custom-select"
name="vtype"
onChange={event => handleChangeInput(index, event)}
>
<option selected disabled>Select Vehicle Type</option>
<option value="ATV">ATV</option>
<option value="Boat">Boat</option>
<option value="Car">Car</option>
<option value="Heavy-Equipment">Heavy Equipment</option>
<option value="Large-Yatch">Large Yatch</option>
<option value="MotorCycle">MotorCycle</option>
<option value="Pickup">Pickup</option>
<option value="RV">RV</option>
<option value="SUV">SUV</option>
<option value="Trailer">Trailer</option>
<option value="Van">Van</option>
<option value="Other">Other</option>
</select>
</div>
</div>
<div className="col-sm-1">
<div className="form-group">
<label htmlFor="inputQty"></label>
<input 
type="text" 
id="inputQty" 
placeholder="Qty" 
value={inputField.qty}
className="form-control" 
name="qty"
onChange={event => handleChangeInput(index, event)}
/>
</div>
</div>
</div>
<div className="row">
<div className="col-sm-3">
<div className="form-group">
<label htmlFor="inputColor"></label>
<input 
type="text" 
id="inputColor" 
placeholder="Vehicle Color" 
value={inputField.color}
className="form-control" 
name="color"
onChange={event => handleChangeInput(index, event)}
/>
</div>
</div>
<div className="col-sm-3">
<div className="form-group">
<label htmlFor="inputPlate"></label>
<input 
type="text" 
id="inputPlate" 
placeholder="Plate Licence" 
value={inputField.plate}
className="form-control" 
name="plate"
onChange={event => handleChangeInput(index, event)}
/>
</div>
</div>
<div className="col-sm-3">
<div className="form-group">
<label htmlFor="inputLot"></label>
<input 
type="text" 
id="inputLot" 
placeholder="Lot Number" 
value={inputField.lot}
className="form-control" 
name="lot"
onChange={event => handleChangeInput(index, event)}
/>
</div>
</div>
<div className="col-sm-3">
<div className="form-group">
<label htmlFor="inputState"></label>
<select 
id="inputState" 
className="form-control custom-select"
value={inputField.vstate}
name="vstate"
onChange={event => handleChangeInput(index, event)}
>
<option selected disabled>State & Province</option>
<option value="Alabama">Alabama</option>
<option value="Alaska">Alaska</option>
<option value="Arizona">Arizona</option>
</select>
</div>
</div>                      
</div>
<div className="form-group">
<label htmlFor="inputInfo">Additional Vehicle Information</label>
<textarea 
id="inputInfo" 
className="form-control" 
rows={4}
value={inputField.info} 
name="info"
onChange={event => handleChangeInput(index, event)}
/>
</div>
<div className="form-group col-2 float-right">
{ index > 0 ?
<button 
type="button" 
onClick={() => handleRemoveField(index)}
className="form-control btn btn-danger"
>
Remove
</button>
:
""
}
</div>
</div>
))}

Try this. I think this is a syntax error

>
.then(data = console.log(data)) ---> .then(data => console.log(data))