Использование Fetch API в React и React-Hook-Form

Question

Я создаю приложение, используя ReactJs и React-Hook-Form. Моя цель - использовать Fetch API для выполнения POST-запроса к серверу (Java -Spring boot).

Ниже приведен мой код: React Component - SalesmanForm:

import { useForm } from "react-hook-form";

import "./SalesmanForm.css";

const SalesmanForm= () => {
    const { handleSubmit, register, errors } = useForm();

    const createSalesman = data => {
        return fetch('http://localhost:1235/salesman/', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        })
            .then((response) => response.json())
            .then((data) => {
                console.log("Create Success: ", data);
            })
            .catch((error) => {
                console.error("ERROR: ", error);
            })
    }

    return (
        <form onSubmit={handleSubmit(createSalesman)}>
            <label>First Name</label>
            <input
                name="firstname" defaultValue="firstname"
                ref={register(
                    {
                        required: true, maxLength: 50
                    }
                )}
            />
            {errors.firstname && <p>This field is required</p>}

            <label>Last Name</label>
            <input
                name="lastname"
                ref={register(
                    {
                        maxLength: 50,
                        validate: value => value !== "" || "This field is required"
                    }
                )}
            />
            {errors.lastname && errors.lastname.message}

            <label>Phone Number</label>
            <input
                name="phonenumber"
                ref={register(
                    {
                        maxLength: 50,
                        validate: value => value !== "" || "This field is required"
                    },
                )}
            />
            {errors.phonenumber && errors.phonenumber.message}

            <label>Address</label>
            <input
                name="address"
                ref={register(
                    {
                        maxLength: 300
                    },
                )}
            />

            <input type="submit" />
        </form>
    );
};

export default SalesmanForm;

API - SalesmanEnpoint:

@RestController
@RequestMapping("/salesman")
@CrossOrigin(origins = "http://localhost:3000")
@Api(value = "Salesman Endpoint")
public class SalesmanEnpoint {
    @Autowired
    SalesmanService salesmanService;

    @RequestMapping(value = "/", method = {RequestMethod.POST})
    @ApiOperation("Add new Salesman")
    public void addNewSalesman(@RequestBody SalesmanDto salesmanDto) {
        salesmanService.saveSalesman(salesmanDto);
    }
}

Реализация службы:

@Service
public class SalesmanServiceImpl implements SalesmanService {
    @Autowired
    SalesmanRepository salesmanRepository;

    ModelMapper modelMapper;

    @PostConstruct
    private void init() {
        modelMapper = new ModelMapper();
    }

    @Override
    public ResultObject<SalesmanDto> saveSalesman(SalesmanDto salesmanDto) {
        ResultObject<SalesmanDto> result = new ResultObject<SalesmanDto>();
        SalesmanEntity salesmanEntity = new SalesmanEntity();
        modelMapper.map(salesmanDto, salesmanEntity);
        SalesmanEntity slsmanEntity = salesmanRepository.save(salesmanEntity);
        modelMapper.map(slsmanEntity, salesmanDto);
        result.setData(salesmanDto);

        return result;
    }
}

Моя проблема заключается в использовании Fetch Api для отправки входных данных отправка на сервер, поэтому мои данные изменились на нулевое значение во время отправки запроса. Я не знаю, почему это так?

Кто-нибудь может подсказать мне, как решить проблему и как ее решить.

Большое спасибо!