How to create a React Component that fetch API based on a router from props ?

export const RowActionDeleteButton = ({ id, model}: { id: string; model : 'lesson' | 'module' }) => {
  const router = useRouter()

  const deleteMutation = api[model].delete.useMutation({
    onSuccess: () => {
      router.reload()
      toast.success(`Key ${id} deleted`)
    },
    onError: (err, variables) => {
      router.reload()
      toast.error(`Error deleting key ${id}`)
      console.error(err, variables)
    },
  })

  return (
    // Error here : Type '[]' has no properties in common with type...
    <Button variant="destructive" onClick={() => deleteMutation.mutate({ id })}>
      Delete
    </Button>
  )
}

export const RowActionDeleteButton = ({ id, model}: { id: string; model : 'lesson' | 'module' }) => {
  const router = useRouter()

  const deleteMutation = api[model].delete.useMutation({
    onSuccess: () => {
      router.reload()
      toast.success(`Key ${id} deleted`)
    },
    onError: (err, variables) => {
      router.reload()
      toast.error(`Error deleting key ${id}`)
      console.error(err, variables)
    },
  })

  return (
    // Error here : Type '[]' has no properties in common with type...
    <Button variant="destructive" onClick={() => deleteMutation.mutate({ id })}>
      Delete
    </Button>
  )
}