ReactJS component won’t update after first API call

So I recently started to discover ReactJS. I have a simple Spring Boot api which has a few methods. One of these returns a list of objects. I get these in my frontend by using Axios to make the HTTP call.

export function getItems() {
  const [items, setItems] = useState([]);
  useEffect(async () => {
    await client.get('items').then((result) => {
      setItems(result.data);
    });
  }, []);
  return items;

The items are mapped in a gallery component and shown on screen. Next to this, I have an addItem function which posts an item object obtained through a form to my api.

export async function addPet(newPet) {
      await client.post(
        '/pets',
        newPet,
      );
    }

My AddPet component is loaded inside my Gallery component. The form is shown on the right side of the screen and when I click the “Add Item” button, I want the item to be added and my list of items reloaded to show the newly added item. Right now, I can not get this working in a correct way. If I remove the “[]” from the final part of my useEffect() in my getItems() functions, everything seems to work but in reality the app is making the getItems call over and over again. If I add “[]”, the call is only made once at the start, but will not re-render the gallery component when an item is added. The handleSubmit() for my “Add item” button is as follows:

const handleSubmit = () => {
    const newItem = new Item();
    newItem .name = formValue.name;
    newItem .image = formValue.image;
    newItem .pitemText = formValue.itemText;
    addItem(newItem);
  };

So my question here is: how can I get that gallery component to re-render whenever I add a new item or delete one of the items? I figure I need a way to change the state of the component but I can’t seem to get it done.