why do i get an #id instead of a whole object - reactjs

Question

Hello I am in the middle fixing a bug and whould like some outside eyes for some support.im using axios to retreive a class from my springboot tomcat server.the information is fine in the controller up to the return portion once it goes to my front end though thats where the problem occurs I get an object like this upon res.data {#id:'1'}.
my class
#JsonInclude(JsonInclude.Include.NON_NULL)
#JsonIdentityInfo(generator= JSOGGenerator.class)
#Getter
#Setter
#Builder
#AllArgsConstructor
#NoArgsConstructor
#Entity
#Table(name = "gender")
public class Gender implements Serializable {
private static final long serialVersionUID = 1L;
#Id
#GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
#Column(nullable = false)
private String gender;
#OneToMany(fetch=FetchType.LAZY, mappedBy="gender")
private Set<User> users;
}
the react page.
import React, { useState,memo,useEffect }from "react";
import axios from 'axios';
import JSOG from 'jsog';
import {decrypt} from "../../Util/jsogRetreival.js";
import Autocomplete from '../../Util/autocomplete';
let Gender=(props)=>{
let[gender,setgender]=useState({});
let[list,setList]=useState([]);
let[error,setError]=useState("");
let[currentValue,setCurrentValue]=useState("");
let[fullList,setFullList]=useState([]);
useEffect(() => {
let getValue="";
const fetchData = async () => {
if(props.id!==-1){
await axios.get(
'http://localhost:8080/gender/getById/'+props.id)
.then(res => {
setgender(res.data);
}).catch(
function (error) {
console.log(error);
});}
else{
await axios.get(
'http://localhost:8080/gender/getDummy')
.then(res => {
//
//where i pause my code and get the #id in res.data
//
//
let genderOf=decrypt(res.data);
let idontknow=JSOG.decode(res.data);
let fuck= JSOG.parse(idontknow);
setgender(res.data);
}).catch(
function (error) {
console.log(error);
});
}
let fromList=[];
await axios.get(
'http://localhost:8080/gender')
.then(res => {
if(res.data.length<1){
}
else{
fromList=decrypt(res.data);
}
setFullList(fromList);
}).catch(
function (error) {
console.log(error);
});
let newList=[];
let newListLink=[];
let ofList=fromList;
ofList.map((item)=>{
newList.push(item.gender);
newListLink.push(item.link);
});
setList(newList);
}
// call the function
fetchData();
});
let onChange=(value,tag)=>{
if(tag==='gender'){
setCurrentValue(value);
let newList=[];
fullList.map((item)=>{
if(item.gender.startsWith(value)){
newList.push(newList.push(item.gender));
}
});
setList(newList);
}
}
let handleSubmit=async(event) => {
event.preventDefault();
await axios.post(
'http://localhost:8080/gender',gender)
.then(res => {
let errors=decrypt(res.data);
setError(errors.genderError);
}).catch(
function (error) {
console.log(error);
});
};
return (<div>
<form action={handleSubmit} >
genderName:<Autocomplete list={list} onChangeValue={onChange}/>
<div>{error}</div>
<input type="submit" value="Submit" />
</form>
</div>);
}
export default Gender;