Как в React с помощью двух input добавить в массив новый элемент и отрисовать его?

у меня есть компонент items

export const Items = ({items,setItems}) => {
  
  const client = Axios.create({
    baseURL: "https://jsonplaceholder.typicode.com/posts",
  });

  const deletePost = (id) => {
    client.delete(`${id}`);
    setItems(
      items.filter((item) => {
        return item.id !== id;
        console.log(item.id);
      })
    );
  };

  useEffect(() => {
    client.get("?userId=1").then((response) => {
      setItems(response.data);
    });
  }, [items]);

  return (
    <div className={style.items}>
      {items.map((item) => (
        <div className={style.items__container} key={item.Id}>
          <h1 className={style.items__heading}>{item.title}</h1>
          <NavLink className={style.items__link} to={`/CurrentCard/${item.id}`}>
            Подробнее...
          </NavLink>
          <p className={style.items__paragraph}>{item.body}</p>
          <button
            className={style.items__btn}
            onClick={() => deletePost(item.id)}
          >
            &times;
          </button>
        </div>
      ))}
    </div>
  );
};

который отрисовывает данные приходящие с апи

так же есть кнопка которая открывает форму с двумя input данные из полей которых должны попасть в масив методом POST

export const AddButton = ({ items, setItems }) => {
  const [open, setOpen] = useState(false);
  const [heading, setHeading] = useState("");
  const [text, setText] = useState("");

  const HandlerHeading = (event) => {
    setHeading(event.target.value);
    console.log(heading);
  };

  const HandlerText = (event) => {
    setText(event.target.value);
    console.log(text);
  };

  const client = Axios.create({
    baseURL: "https://jsonplaceholder.typicode.com/posts",
  });

  useEffect(() => {
    client.get("?userId=1").then((response) => {
      setItems(response.data);
    });
  }, [items]);
 


  const PostData = (e) => {
    
    client
      .post("?userId=1", {
        title: heading,
        body: text,
        userId: 1,
      })
      .then((response) => console.log(response))
      .catch((err) => console.log(err));
  };

  return (
    <div>
      <a href="#" className={style.button} onClick={(e) => setOpen(!open)}>
        Add post
      </a>
      {open && (
        <div className={style.button__openContainer}>
          <div className={style.button__inputBox}>
            <input
              className={style.button__inputs}
              onInput={HandlerHeading}
              placeholder="Heading?"
            />
            <input
              className={style.button__inputs}
              onInput={HandlerText}
              placeholder="Text?"
            />
            <button onClick={(e) => PostData(e)}>Save</button>
          </div>
        </div>
      )}
    </div>
  );
};

и я все не понимаю как сделать так что бы после выполнения запроса POST элемент items сразу перерисовывался с новыми значениями