React MVVM with hooks

FriendLine.js

import {useFriend} from '../model/useFriend'

export function FriendLine ({friend}) {
    const {fullname, deleteFriend} = useFriend(friend)
    return (<tr>
              <td>{fullname}</td>
              <td><button onclick={deleteFriend} /></td>
            </tr>);
  }

Personal.js

import {usePersonal} from '../model/usePersonal'
import {FriendLine} from '../../Friends/presentation/FriendLine'

export function Personal ({ id }) {
  const {fullname, age, friends, setAge} = usePersonal(id)
  return (<div>
    <h1>{ fullname}</h1>
    <input value={age} onChange={setAge} />
    <table>
     {
        friends.map(FriendLine)
     }
    </table>
           
  </div>);
}

useFriend.js

import { useState } from "react";

export const useFriend = ({personalId, friend}) => {

    const {
        personalService,
      } = useServices(); // React.Context to inject the services

    const [fullname, ] = useState(friend.name)
    
    const deleteFriend = personalService.removePresonalFriend(personalId, friend.id)

    return {fullname, deleteFriend}

}

usePersonal.js

import { useEffect, useState } from "react";


export const usePersonal = ({id}) => {

    const {
        personalService,
      } = useServices(); // React.Context to inject the services

    const [fullname, setFullname] = useState()
    const [age, setAge] = useState()
    const [friends, setFriends] = useState([])

    useEffect( () => {
        personalService.find(id).then(personal => {
            setFullname(personal.fullname)
            setAge(personal.age)
            setFriends(personal.friends)
        })

    }, [id, personalService] )

    return {fullname, age, friends, setAge}

}