Pattern Call Data Pada React Hooks

ListUser.js

import React from 'react'

const getUsers = async (callback) => {
    // call api
    // dummy response
    const response = {
        status: 'success',
        message: 'get data user success',
        data: [
            {id: 1, name: 'AAA'},
            {id: 2, name: 'BBB'},
            {id: 3, name: 'CCC'},
        ],
    }
    callback(response)
}

const addUser = async (name, callback) => {
    // call api
    // dummy response
    const response = {
        status: 'success',
        message: 'add data success',
        data: { id: 4, name: name },
    }
    callback(response)
}

function ListUser() {
    const [initial, setIntial] = React.useState(true)
    const [users, setUsers] = React.useState([])
    const [name, setName] = React.useState('')

    React.useEffect(()=>{
        if (initial) {
            setIntial(false)
            getUsers( ({status, message, data}) => {
                if (status === 'success') {
                    setUsers(data)
                } else {
                    // throw error
                    console.log(message)
                }
            })
        }
    }, [initial])

    const handleSubmit = (evt) => {
        evt.preventDefault();
        addUser(name, ({status, message, data}) => {
            if (status === 'success') {
                console.log('succeess')
                setUsers([data, ...users])
            } else {
                // throw error
                console.log(message)
            }
        })
    }
    return <>
        <form  onSubmit={handleSubmit}>
        Name :
        <input value={name} onChange={e => setName(e.target.value)} />
        <button type="submit">ADD</button>
        </form>
        {(users && users.length>0)
            ? users.map((user, index) => {
                return <div key={index}>{user.name}</div>
            })
            : <div> data is empty </div>
        }
    </>
}

export default ListUser