How to send a formData with a JSON in the body in REACT.js and MONGODB

Question

I tried to send a JSON in the body via a form but an error appears. Do you know how to send it? Yo help me a lot!

I take out the json part in the formData and it works. Meaby I need to do the JSON.Stringyfy in some part.

import React, {useState} from "react";
import {Container, Form, Button, InputGroup, FormControl} from 'react-bootstrap'
import axios from 'axios'
const AddProducts=()=>{
    const [formData,setFormData]=useState(
        {
            brand: '',
            name: '',
            quantity: {amount: 0,unity: ''},
            description: '',
            price: '',
            stock: {available: false,amount: 0},
            color: '',
            material: '',
            insulation: '',
            fabricated: '',
            photo: ''
        }
    )

    const handleChange=(e)=>{
        const {key,value}=e.target
        setFormData({...formData,[key]:value})
    }

    const handleSubmit=async (e)=>{
        e.preventDefault();
        try {
            console.log('Form submitted:', formData);
            await axios.post('/addproduct',formData)
            
        } catch (error) {
            console.log(" ~ file: AddProducts.jsx:35 ~ handleSubmit ~ error:", error)
            return error
        }
    }

    return(
        <Container>
            <Form onSubmit={handleSubmit}>
                <Form.Group controlId="brand">
                    <Form.Label>Brand</Form.Label>
                    <Form.Control type="text" name="brand" value={formData.brand} onChange={handleChange}/>
                </Form.Group>

                <Form.Group controlId="name">
                    <Form.Label>Name</Form.Label>
                    <Form.Control type="text" name="name" value={formData.name} onChange={handleChange}/>
                </Form.Group>
            
                <Form.Group controlId="quantity">
                    <Form.Label>Quantity</Form.Label>
                    <InputGroup>

                        <FormControl type="number" name="amount" value={formData.quantity.amount} onChange={handleChange} />

                        <InputGroup.Text>amount</InputGroup.Text>

                        <FormControl type="text" name="unity" value={formData.quantity.unity} onChange={handleChange} />

                    </InputGroup>
                </Form.Group>
              
                <Form.Group controlId="description">
                    <Form.Label>Description</Form.Label>
                    <Form.Control type="text" name="name" value={formData.description} onChange={handleChange}/>
                </Form.Group>
                <Form.Group controlId="price">
                    <Form.Label>Price</Form.Label>
                    <Form.Control type="text" name="price" value={formData.price} onChange={handleChange}/>
                </Form.Group>
              
                <Form.Group controlId="stock">
                <Form.Label>Stock</Form.Label>
                    <InputGroup>
                    <InputGroup.Prepend>
                        <InputGroup.Checkbox name="boolean" checked={formData.stock.available} onChange={handleChange}/>
                    </InputGroup.Prepend>
                    <FormControl type="number" name="number" value={formData.stock.number} onChange={handleChange} />
                    </InputGroup>
                </Form.Group>
               
                <Form.Group controlId="color">
                    <Form.Label>Color</Form.Label>
                    <Form.Control type="text" name="color" value={formData.color} onChange={handleChange}/>
                </Form.Group>
                <Form.Group controlId="material">
                    <Form.Label>Material</Form.Label>
                    <Form.Control type="text" name="material" value={formData.material} onChange={handleChange}/>
                </Form.Group>
                <Form.Group controlId="insulation">
                    <Form.Label>Insulation</Form.Label>
                    <Form.Control type="text" name="insulation" value={formData.insulation} onChange={handleChange}/>
                </Form.Group>
                <Form.Group controlId="fabricated">
                    <Form.Label>Fabricated</Form.Label>
                    <Form.Control type="text" name="fabricated" value={formData.fabricated} onChange={handleChange}/>
                </Form.Group>
                <Form.Group controlId="photo">
                    <Form.Label>Photo</Form.Label>
                    <Form.Control type="text" name="photo" value={formData.photo} onChange={handleChange}/>
                </Form.Group>

                

                <Button variant="primary" type="submit">
                    Submit
                </Button>
            </Form>
        </Container>
    )
}

export default AddProducts

I was expecting a successfully saving but I recieved this
enter image description here