Formik onSubmit Not Logging Values When Using validationSchema

[johnyeom24]

The following code snippet is part of what I’ve been working on. I created a schema for validation and added it to the validationSchema prop in Formik. However, after doing so, the console.log(values) in the onSubmit handler is no longer being logged.

Does using validationSchema prevent console.log(values) from being logged, or is there an issue with my schema?

I wrote inputs those are valid but onSubmit didn't work.

Here’s the code:

<Formik
  initialValues={initialValues}
  // validationSchema={schema}
  onSubmit={(values) => console.log(values)}
>
  <Form>
    <Box>
      <CommonForm
        name="ticketName"
        title="Ticket Name"
        placeholder="Enter the event ticket name"
        isRequired
      />
      <CommonForm
        name="supportContact"
        title="Contact Person"
        placeholder="Enter a contact that can quickly respond to inquiries"
        isRequired
      />
      <Box
        sx={{
          display: 'flex',
          justifyContent: 'flex-end',
          alignItems: 'center',
        }}
      >
        <Button type="submit">Add Ticket</Button>
      </Box>
    </Box>
  </Form>
</Formik>

And here’s the schema I’m using in useTicketSettingSchema.ts:

Actually I had deleted useMemo, but it didn't also work.

import { useMemo } from 'react';

import { number, object, string } from 'yup';

import type { TicketSettingType } from 'types/event';

const INITIAL_VALUE = 0;

const useTicketSettingSchema = () => {
  const initialValues: TicketSettingType = {
    ticketName: '',
    ticketDescription: '',
    ticketPrice: '',
    ticketQuantity: INITIAL_VALUE,
    availableTicketsPerPerson: INITIAL_VALUE,
    ticketStartDate: '',
    ticketEndDate: '',
    supportContact: '',
  };

  const schema = useMemo(() => {
    return object({
      ticketName: string().required('Please enter the ticket name.'),
      ticketDescription: string().required('Please enter a description for the ticket.'),
      ticketPrice: string()
        .required('Please enter the ticket price.')
        .min(4, 'The minimum ticket price is 1,000.'),
      ticketQuantity: number().required('Please enter the quantity of tickets.'),
      availableTicketsPerPerson: number().required(
        'Please enter the maximum number of tickets per person.',
      ),
      ticketStartDate: string().required('Please enter the ticket start date.'),
      ticketEndDate: string().required('Please enter the ticket end date.'),
      supportContact: string().required('Please provide a contact for inquiries.'),
    });
  }, []);

  return { initialValues, schema };
};

export { useTicketSettingSchema };

Can you help me figure out why console.log(values) isn't being logged anymore?