the error message on my api console is Failed to convert value of type 'java.lang.String' to required type 'java.lang.Long'; For input string: "undefined"

I have looked into the axios code in my react services.jsx file export const listHymns = (bookId) => axios.get(`${REST_API_BASE_URL}${bookId}/hymns`);
and my controller class in t the api but nothing seems to work

 // Find all hymns belonging to the specific book
    @GetMapping("/{bookId}/hymns")
    public ResponseEntity<APIResponse<List<HymnDto>>> getHymnsByBookId(
            @PathVariable("bookId") Long bookId) {

        List<HymnDto> result = hymnService.getHymnsByBookId(bookId);

        // Builder Design pattern
        APIResponse<List<HymnDto>> responseDTO = APIResponse
                .<List<HymnDto>>builder()
                .status(SUCCESS)
                .results(result)
                .build();


        return new ResponseEntity<>(responseDTO, HttpStatus.OK);
    }