Модальное окно не закрывается при отправке

Я использую shadcn-ui для создания модального окна вместе с React-Hook-Form и Zod.

Моя главная цель — закрыть модальное окно при отправке формы.

Я визуализирую модальное окно внутри data-table.tsx:

import {
  ...
} from '@tanstack/react-table'
import { Container } from 'lucide-react'
import { useState } from 'react'

import { DataTablePagination } from '@/components/data-table-pagination'
import { Button } from '@/components/ui/button'
import { Dialog, DialogTrigger } from '@/components/ui/dialog'
import { Input } from '@/components/ui/input'
import {
  Table,
  ...
} from '@/components/ui/table'

import { NewSupplierModal } from '../../modals/NewSupplierModal'
import { useNewSupplierModalController } from '../../modals/NewSupplierModal/useNewSupplierModalController'

interface DataTableProps<TData, TValue> {
  columns: ColumnDef<TData, TValue>[]
  data: TData[]
}

export function SupplierDataTable<TData, TValue>({
  columns,
  data,
}: DataTableProps<TData, TValue>) {
  const [sorting, setSorting] = useState<ColumnSort[]>([])
  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])

  const { isNewSupplierModalOpen, setIsNewSupplierModalOpen } =
    useNewSupplierModalController()

  const table = useReactTable({
    data,
    columns,
    ...
  })

  return (
    <div className = "mx-auto container">
      <div className = "flex justify-between items-center mb-[10px]">
        <Input
          placeholder = "Buscar fornecedores"
          value = {(table.getColumn('name')?.getFilterValue() as string) || ''}
          onChange = {(e) => {
            table.getColumn('name')?.setFilterValue(e.target.value)
          }}
          className = "max-w-sm"
        />

        <Dialog
          open = {isNewSupplierModalOpen}
          onOpenChange = {setIsNewSupplierModalOpen}
        >
          <DialogTrigger asChild>
            <Button variant = "outline" size = "xs">
              <Container className = "mr-2 w-4 h-4" />
              Adicionar novo fornecedor
            </Button>
          </DialogTrigger>

          <NewSupplierModal />
        </Dialog>
      </div>

      <div className = "mb-6 border rounded-md">
        <Table>
          ...
        </Table>
      </div>

      {/* Pagination */}
      <DataTablePagination table = {table} />
    </div>
  )
}

Здесь находится вся логика моего модального окна:

import { zodResolver } from '@hookform/resolvers/zod'
import { useMutation, useQueryClient } from '@tanstack/react-query'
import { FormEvent, FormEventHandler, useCallback, useState } from 'react'
import { useForm } from 'react-hook-form'
import toast from 'react-hot-toast'
import * as z from 'zod'

import supplierService from '@/services/supplierService'

import { formSupplier } from '../../Table/SuppliersList/validators/form'

type Form = z.infer<typeof formSupplier>

export function useNewSupplierModalController() {
  const [isNewSupplierModalOpen, setIsNewSupplierModalOpen] = useState(false)

  const openNewSupplierModal = () => {
    setIsNewSupplierModalOpen(true)
  }

  const closeNewSupplierModal = () => {
    setIsNewSupplierModalOpen(false)
  }

  const queryClient = useQueryClient()

  const { mutateAsync, isPending } = useMutation({
    mutationFn: supplierService.create,
    onSuccess: () => {
      queryClient.invalidateQueries({
        queryKey: ['get-suppliers'],
      })
    },
  })

  const form = useForm<Form>({
    resolver: zodResolver(formSupplier),
    defaultValues: {
      supplierName: '',
    },
  })

  async function onSubmit(data: Form) {
    try {
      await mutateAsync({
        name: data.supplierName,
      })

      toast.success('Fornecedor cadastrado com sucesso!')
      form.reset({
        supplierName: '',
      })
      closeNewSupplierModal()
    } catch (error) {
      toast.error('Erro ao enviar a requisição')
      form.reset({
        supplierName: '',
      })
    }
  }

  console.info({ isNewSupplierModalOpen })

  return {
    form,
    isPending,
    isNewSupplierModalOpen,
    onSubmit,
    openNewSupplierModal,
    closeNewSupplierModal,
    setIsNewSupplierModalOpen,
  }
}

А это его интерфейс:

import { Spinner } from '@/components/spinner'
import { Button } from '@/components/ui/button'
import {
  DialogContent,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog'
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/ui/form'
import { Input } from '@/components/ui/input'

import { useNewSupplierModalController } from '../../modals/NewSupplierModal/useNewSupplierModalController'

export function NewSupplierModal() {
  const { form, onSubmit, isPending } = useNewSupplierModalController()

  return (
    <DialogContent className = "max-w-sm font-body">
      <DialogHeader>
        <DialogTitle>Novo Fornecedor</DialogTitle>
      </DialogHeader>

      <Form {...form}>
        <form onSubmit = {form.handleSubmit(onSubmit)} className = "space-y-4">
          <FormField
            control = {form.control}
            name = "supplierName"
            render = {({ field }) => (
              <FormItem>
                <FormLabel>Nome do fornecedor</FormLabel>
                <FormControl>
                  <Input
                    placeholder = "Informe o nome do fornecedor"
                    {...field}
                  />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />

          <Button type = "submit" disabled = {isPending} className = "p-5 w-full">
            {isPending ? <Spinner /> : 'Cadastrar'}
          </Button>
        </form>
      </Form>
    </DialogContent>
  )
}

Я не знаю, передал ли я в свои реквизиты open и onOpenChange какое-то состояние или функцию, но до сих пор мне это не удалось.

Заранее спасибо за вашу помощь.