Cannot get or put a value which hinges a many to one JPA DB relationship

Question

I need to get and put a value from a Java JPA database but cannot. This value (countryId) is an integer which hinges the many to one relationship (product/country). I can get and put the rest of the values from the 'product' table no problem.

controller

form

Changing the id value from Postman works.

postman

I just need to know how to handle the getting a putting from the react side.

import axios from 'axios'
import React, { useEffect, useState } from 'react'
import { Link, useNavigate, useParams } from 'react-router-dom'

export default function EditProduct() {

    let navigate=useNavigate();
    const {id}=useParams();
    
    const [product,setProduct]= useState({
        productName:"",
        productDescription:"",
        productPrice:"",
        transAvailable:"",
        countryId:0
    });

    const{productName,productDescription,productPrice,transAvailable,countryId}=product;

    const onInputChange=(e)=>{
        setProduct({...product,[e.target.name]: e.target.value});
    };

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

    const onSubmit= async(e)=>{
        e.preventDefault();
        await axios.put(`http://localhost:8080/product/${id}/`, product);
         navigate(`/viewproduct/${id}`);
    };

    const loadProduct =async ()=>{
        const result=await axios.get(`http://localhost:8080/product/${id}/`);
        setProduct(result.data);
    };

  return (
    <div className="container">
        <div className ="row">
            <div className="col-md-6 offset-md-3 border rounded p-4 mt-2 shadow">
                <h2 className="text-center">Edit Product</h2>
                <form onSubmit={(e) => onSubmit(e)}>
                <div className="mb-3 mt-4">
                    <label htmlFor="ProductName" className="form-label">
                        Product to edit
                    </label>
                    <input
                        type={"text"}
                        className="form-control"
                        placeholder="Enter product"
                        name="productName"
                        value={productName}
                        onChange={(e)=>onInputChange(e)}
                    />
                </div>

                <div className="mb-3">
                    <label htmlFor="ProductDescription" className="form-label">
                        UPC/ID #
                    </label>
                    <input
                        type={"text"}
                        className="form-control"
                        placeholder="Enter UPC/ID #"
                        name="productDescription"
                        value={productDescription}
                        onChange={(e)=>onInputChange(e)}
                    />
                </div>

                <div className="mb-3">
                    <label htmlFor="Price" className="form-label">
                        Price
                    </label>
                    <input
                        type={"text"}
                        className="form-control"
                        placeholder="Enter price"
                        name="productPrice"
                        value={productPrice}
                        onChange={(e)=>onInputChange(e)}
                    />
                </div>

                <div className="mb-3">
                    <label htmlFor="TransactionAvailable" className="form-label">
                     Available Transaction
                    </label>
                    <input
                        type={"text"}
                        className="form-control"
                        placeholder="Enter price"
                        name="transAvailable"
                        value={transAvailable}
                        onChange={(e)=>onInputChange(e)}
                    />
                </div>

                <div className="mb-3">
                    <label htmlFor="CountryId" className="form-label">
                        Country ID
                    </label>
                    <input
                        type={"number"}
                        className="form-control"
                        placeholder="Enter country ID"
                        name="countryId"
                        value={countryId}
                        onChange={(e)=>onInputChange(e)}
                    />
                </div>

                <button type="submit" className="btn btn-outline-primary" >
                    Submit
                </button>
                <Link className="btn btn-outline-danger mx-2" to="/">
                    Cancel
                </Link>
                </form>
            </div>
        </div>
    </div>    
  );
}