Создание собственного хука для работы с массивом

Нужно написать пользовательский хук useArray, который предоставляет возможности добавления и удаления элементов из массива. Пример использования хука показан ниже.

import { useArray } from "./hooks/useArray";
import "./styles.css";

export default function App() {
  const { value, push, removeByIndex } = useArray<number>([1, 2, 3]);

  return (
    <div>
      <ul>
        {value.map((item, index) => (
          <li key={index}>
            {item}
            <button onClick={() => removeByIndex(index)}>Удалить</button>
          </li>
        ))}
      </ul>
      <button onClick={() => push(value.length + 1)}>Добавить</button>
    </div>
  );
}

Требования к реализации:

• Хук должен принимать начальное значение массива.
• Возвращаемый объект должен содержать текущий массив (value), функцию для добавления элемента в конец (push) и функцию для удаления элемента по индексу (removeByIndex).
• При вызове push массив обновляется, добавляя переданное значение.
• При вызове removeByIndex элемент с указанным индексом удаляется, а массив пересчитывается без мутации исходного состояния.
• Хук должен использовать стандартные React‑хуки (useState, useCallback и т.д.) и корректно работать в функциональных компонентах.