Form Select value not being passed on submit [react

Question

I am having troubles setting a form select within a react component:

when i submit the form all fields are filled out but the first select value (product) is not passed, while the second (transaction_type) is passed. My API is returning that that value cannot be null.

django.db.utils.IntegrityError: null value in column "product_id" of relation "product_transaction" violates not-null constraint
DETAIL:  Failing row contains (33, 2022-02-22 18:30:22.458768+00, OUT, 2, aaa, null, null).

Please, what am i missing for it to grab that value and pass it on the submit?

function AddTransaction() {

    const [product, setTransactionProduct] = useState('1');
    const [transaction_type, setTransactionType] = useState('OUT');
    ...

    const [Products, setProducts] = useState([])

    useEffect(() => {
        const fetchProducts = async () => {

        ...

        }
        fetchProducts()   
    }, [])

    const getProducts = () => {
        let list = [];

        Products.map(item => {
            return list.push(
                <option 
                    key={item.id} 
                    value={item.id}
                >
                    {item.title}
                </option>
            )
        })
        return list
    }
    
    const navigate = useNavigate();

    const addToForm = async () => {

        let formfield = new FormData()

        formfield.append('product', product)
        formfield.append('transaction_type', transaction_type)
        ...

        await axios({
            method: 'post',
            url: 'http://127.0.0.1:8000/api/transaction_create',
            headers: {
                'content-type': 'multipart/form-data',
                'Authorization': '(*&^%$#@!)(*&^%$#*&^%@#$%^&*',
            },
            data: formfield,
           
            
        }).then((response) => {
            navigate(-1)
          }, (error) => {

          });
        
    }

    return ( 
            <div className='container'>
                <h5>Agregar transacci&oacute;n</h5>
                <form encType='multipart/form-data' >
                    <div className="mb-3">
                        <label className="form-label">Nombre del medicamento</label>
                        <select 
                            value={product}
                            className="form-control"                            
                            onChange={(e) => {
                                const selection = e.target.value;
                                setTransactionProduct(selection)
                                }
                            }
                        >
                            {getProducts()}
                        </select>
                    </div>
                    <div className="mb-3">
                        <label className="form-label">Entrada/Salida</label>
                        <select 
                            className="form-control"
                            value={transaction_type} 
                            onChange={(e) => {
                                    const selection = e.target.value;
                                    setTransactionType(selection)
                                }
                            }
                            >
                                <option  value='IN'>Entrada</option>
                                <option  value='OUT'>Salida</option>
                        </select>
                    </div>
                    
                    ...
                    
                    <button type="submit" className="btn btn-primary" onClick={addToForm}>Submit</button>
                </form>
            </div>
        
    );
}

export default AddTransaction;

States are being updated accordingly, but value attr for select is not redered.