Мне нужно чтобы работало создание и изменение сущностей. Также нужно чтобы выполнялось правило:  Form submission:
● Values are sent to the server and stored in memory.
● The request payload should contain only what the user
filled/changed.
○ On create: if a user filled 4 fields, the request payload must
contain only 4 fields.
○ On edit: if a user changed only one field, the request
payload must contain 1 field. ListItems.jsx 
import { useEffect, useState } from 'react';
import { getItems } from '../api';
import { ItemTable } from '../components/ItemTable';
import { Link } from 'react-router-dom';

export const ListItemsPage = () => {
  const [items, setItems] = useState([]);

  useEffect(() => {
    getItems().then(response => setItems(response.data));
  }, []);

  return (
    <div>
      <h1>Warehouse Items</h1>
      <ItemTable items={items} />
      <Link to="/create">Create New Item</Link>
    </div>
  );
};  EditItems import { useEffect, useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { getItems, updateItem } from '../api';
import { ItemForm } from '../components/ItemForm';

export const EditItemPage = () => {
  const { id } = useParams();
  const navigate = useNavigate();
  const [item, setItem] = useState(null);

  useEffect(() => {
    getItems().then((response) => {
      const foundItem = response.data.find((item) => item.id === parseInt(id));
      setItem(foundItem);
    });
  }, [id]);

  const handleSubmit = (data) => {
    updateItem(id, data).then(() => navigate('/'));
  };

  return item ? (
    <div>
      <h1>Edit Item</h1>
      <ItemForm onSubmit={handleSubmit} defaultValues={item} />
      <button onClick={() => navigate('/')}>Back to List</button>
    </div>
  ) : (
    <div>Loading...</div>
  );
}; CreateItem import { useNavigate } from 'react-router-dom';
import { createItem } from '../api';
import { ItemForm } from '../components/ItemForm';

export const CreateItemPage = () => {
  const navigate = useNavigate();

  const handleSubmit = (data) => {
    createItem(data).then(() => navigate('/'));
  };

  return (
    <div>
      <h1>Create Item</h1>
      <ItemForm
        onSubmit={handleSubmit}
        defaultValues={{ name: '', category: '', quantity: 1, tasks: [] }}
      />
      <button onClick={() => navigate('/')}>Back to List</button>
    </div>
  );
};
 ItemTable import { Link } from 'react-router-dom';

export const ItemTable = ({ items = [] }) => {
  return (
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Category</th>
          <th>Quantity</th>
          <th>Location</th>
          <th>Supplier</th>
          <th>Supplier Location</th>
          <th>Price Type</th>
          <th>Price</th>
          <th>Endpoints</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        {items.length > 0 ? (
          items.map((item) => (
            <tr key={item.id}>
              <td>{item.name}</td>
              <td>{item.category}</td>
              <td>{item.quantity}</td>
              <td>{item.location}</td>
              <td>{item.supplier || 'N/A'}</td>
              <td>{item.supplierLocation || 'N/A'}</td>
              <td>{item.showPriceDetails === 'yes' ? item.priceType : 'N/A'}</td>
              <td>
                {item.showPriceDetails === 'yes' && typeof item.price !== 'undefined'
                  ? item.price
                  : 'N/A'}
              </td>
              <td>
                {item.endpoints && item.endpoints.length > 0 ? (
                  <ul>
                    {item.endpoints.map((endpoint, index) => (
                      <li key={index}>{`${endpoint.endpoint} - ${endpoint.status}`}</li>
                    ))}
                  </ul>
                ) : (
                  <p>No endpoints available</p>
                )}
              </td>
              <td>
                <Link to={`/edit/${item.id}`}>Edit</Link>
              </td>
            </tr>
          ))
        ) : (
          <tr>
            <td colSpan="10">No items available</td>
          </tr>
        )}
      </tbody>
    </table>
  );
}; ItemForm 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().required('Quantity is required').min(1),
  location: yup.string().optional(),
  supplier: yup.string().optional(),
  supplierLocation: yup.string().optional(),
  showPriceDetails: yup.string().required('Please select an option'),
  priceType: yup.string().when('showPriceDetails', {
    is: 'yes',
    then: yup.string().required('Price Type is required'),
    otherwise: yup.string().notRequired(),
  }),
  price: yup.number().when('showPriceDetails', {
    is: 'yes',
    then: yup.number().required('Price is required').min(0),
    otherwise: yup.number().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="grid">
        <label>Name:</label>
        <input {...register('name')} />
        {errors.name && <p>{errors.name.message}</p>}

        <label>Category:</label>
        <select {...register('category')}>
          <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>{errors.category.message}</p>}

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

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

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

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

      <div>
        <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>{errors.showPriceDetails.message}</p>}
      </div>

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

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

      <div>
        <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}`}
            />
            {errors.endpoints?.[index]?.endpoint && (
              <p>{errors.endpoints[index].endpoint.message}</p>
            )}

            <label>Status:</label>
            <select {...register(`endpoints.${index}.status`)}>
              <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>{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>
  );
}; api.js import axios from 'axios';

const api = axios.create({
  baseURL: 'http://localhost:5000',
});

export const getItems = () => api.get('/items');
export const createItem = (data) => api.post('/items', data);
export const updateItem = (id, data) => api.put(`/items/${id}`, data);