сделай grid красивый для этой формы. Учитывай, где могут появится <p> с ошибкой валидации, чтобы это не сломало grid.  import { useForm, useFieldArray } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';
import { useEffect } from 'react';
const schema = yup.object({
  name: yup.string().required('Name is required').max(50, 'Max length is 50'),
  category: yup.string().required('Category is required'),
  quantity: yup
    .number()
    .typeError('Quantity must be a number')
    .required('Quantity is required')
    .min(1, 'Quantity must be at least 1'),
  location: yup.string().notRequired(),
  supplier: yup.string().notRequired(),
  supplierLocation: yup.string().notRequired(),
  showPriceDetails: yup
    .string()
    .oneOf(['yes', 'no'], 'Please select an option')
    .required('Please select an option'),

  priceType: yup
    .string()
    .when('showPriceDetails', {
      is: 'yes',
      then: schema => schema.required('Price Type is required'),
      otherwise: schema => schema.notRequired(),
    }),

  price: yup
    .number()
    .transform((value, originalValue) => (originalValue === '' ? undefined : value))
    .when('showPriceDetails', {
      is: 'yes',
      then: schema =>
        schema
          .required('Price is required')
          .typeError('Price must be a number')
          .min(1, 'Price must be at least 1'),
      otherwise: schema => schema.notRequired(),
    }),

  endpoints: yup.array().of(
    yup.object({
      endpoint: yup.string().required('Endpoint is required'),
      status: yup.string().required('Status is required'),
    })
  ),
});

export const ItemForm = ({ defaultValues, onSubmit }) => {
  const {
    register,
    handleSubmit,
    watch,
    control,
    formState: { errors },
    reset,
  } = useForm({
    defaultValues,
    resolver: yupResolver(schema),
  });

  const { fields, append, remove } = useFieldArray({
    control,
    name: 'endpoints',
  });

  const showPriceDetails = watch('showPriceDetails', 'no') === 'yes';

  useEffect(() => {
    reset(defaultValues);
  }, [defaultValues, reset]);

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="form-grid">
      <div className="form-group">
        <label>Name:</label>
        <input
          {...register('name')}
          className={errors.name ? 'input-error' : ''}
        />
        {errors.name && <p className="error-message">{errors.name.message}</p>}

        <label>Category:</label>
        <select
          {...register('category')}
          className={errors.category ? 'input-error' : ''}
        >
          <option value="">Select category</option>
          <option value="Electronics">Electronics</option>
          <option value="Furniture">Furniture</option>
          <option value="Clothing">Clothing</option>
          <option value="Food">Food</option>
          <option value="Toys">Toys</option>
          <option value="Books">Books</option>
          <option value="Sports">Sports</option>
        </select>
        {errors.category && (
          <p className="error-message">{errors.category.message}</p>
        )}

        <label>Quantity:</label>
        <input
          type="number"
          {...register('quantity')}
          className={errors.quantity ? 'input-error' : ''}
        />
        {errors.quantity && (
          <p className="error-message">{errors.quantity.message}</p>
        )}

        <label>Location:</label>
        <input {...register('location')} />
      </div>

      <div className="form-group">
        <label>Supplier (Optional):</label>
        <input {...register('supplier')} />

        <label>Supplier Location (Optional):</label>
        <input {...register('supplierLocation')} />
      </div>

      <div className="form-group">
        <label>Show Price Details?</label>
        <label>
          <input
            type="radio"
            value="yes"
            {...register('showPriceDetails')}
            defaultChecked={defaultValues?.showPriceDetails === 'yes'}
          />{' '}
          Yes
        </label>
        <label>
          <input
            type="radio"
            value="no"
            {...register('showPriceDetails')}
            defaultChecked={defaultValues?.showPriceDetails !== 'yes'}
          />{' '}
          No
        </label>
        {errors.showPriceDetails && (
          <p className="error-message">{errors.showPriceDetails.message}</p>
        )}
      </div>

      {showPriceDetails && (
        <div className="form-group">
          <label>Type:</label>
          <select {...register('priceType')} className={errors.priceType ? 'input-error' : ''}>
            <option value="">Select type</option>
            <option value="For Sale">For Sale</option>
            <option value="For Buying">For Buying</option>
          </select>
          {errors.priceType && (
            <p className="error-message">{errors.priceType.message}</p>
          )}

          <label>Price:</label>
          <input
            type="number"
            {...register('price')}
            className={errors.price ? 'input-error' : ''}
            placeholder="Enter price"
          />
          {errors.price && <p className="error-message">{errors.price.message}</p>}
        </div>
      )}

      <div className="form-group">
        <h3>Endpoints</h3>
        {fields.map((endpoint, index) => (
          <div key={endpoint.id} className="grid">
            <label>Endpoint {index + 1}:</label>
            <input
              {...register(`endpoints.${index}.endpoint`)}
              placeholder={`Endpoint ${index + 1}`}
              className={errors.endpoints?.[index]?.endpoint ? 'input-error' : ''}
            />
            {errors.endpoints?.[index]?.endpoint && (
              <p className="error-message">{errors.endpoints[index].endpoint.message}</p>
            )}

            <label>Status:</label>
            <select
              {...register(`endpoints.${index}.status`)}
              className={errors.endpoints?.[index]?.status ? 'input-error' : ''}
            >
              <option value="">Select status</option>
              <option value="Delivering">Delivering</option>
              <option value="Delivered">Delivered</option>
              <option value="Pending">Pending</option>
              <option value="Delayed">Delayed</option>
              <option value="Canceled">Canceled</option>
            </select>
            {errors.endpoints?.[index]?.status && (
              <p className="error-message">{errors.endpoints[index].status.message}</p>
            )}

            <button type="button" onClick={() => remove(index)}>Remove Endpoint</button>
          </div>
        ))}
        <button type="button" onClick={() => append({ endpoint: '', status: '' })}>
          Add Endpoint
        </button>
      </div>

      <button type="submit">Save</button>
    </form>
  );
};