Somebody knows how to populate this field showing in the picture below with specific data object?

this is the image(click here!) where you can see our web page with certain fields, that one of the field with arrow is the one didn't populate object from the backend

this is written with react & typescript & our backend is java springboot & MySQL as database.

and here is the code that i'm suspected , having a issue:

const AddUsers: FC = (props) => {
    const navigate = useNavigate();
    // const { id } = useParams();
    const dispatch = useDispatch();
    const roleList = useGetRoleList()
    const user = useCurrentUser();
    const [rolesInput, setRolesInput] = useState<MultiValue<{ value: string; label: string; }>>([]);
    const isFetching = useInviteUserLoading()
    const permitted = useCheckPermission(ROLES.ADD_USER)
 
    
const { register, handleSubmit, formState: { errors }, clearErrors, reset } = 
        useForm<IUserForm>({ //'resetField'
        mode: "onChange",
        resolver: yupResolver(userFormSchema)
    });

    useEffect(() => {
        window.scrollTo({ top: 0, behavior: 'smooth' });
    }, [])

    //fetching list from backend.. <--------
    useUpdateEffect( () => {
        dispatch( getRolesList({companyId: user.companyId}) );
        
    },[user.companyId])

    useUpdateEffect(() => {
        clearErrors()
        reset(); 
    }, [isFetching])

    const onSubmit: SubmitHandler<IUserForm> = (data)=>{
        const roles = rolesInput.map(role => parseInt(role.value))  

        if(roles){
            dispatch(inviteUser({
                companyId: user.companyId,
                roles: roles,
                firstName: data.firstName,
                lastName: data.lastName,
                email: data.email
            }))
        }else{
            alert("Please assign roles")
        }
    }