Динамическое изменение данных на стороне клиента при помощи react

Допустим, у меня имеется список продуктов и мне нужно сделать так, чтобы при добавлении товаров на сервер, пользователь смог сразу его увидеть не перезагружая страницы. Каким образом это можно реализовать? Мой код (практическо полностью взято из документации):

import React from "react";
class List extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        error: null,
        isLoaded: false,
        items: []
      };
    }
  
    componentDidMount() {
      fetch("http://127.0.0.1:8000/api/v1/product-list/")
        .then(res => res.json())
        .then(
          (result) => {
            this.setState({
              isLoaded: true,
              items: result
            });
          },
          (error) => {
            this.setState({
              isLoaded: true,
              error
            });
          }
        )
    }
  
    render() {
      const { error, isLoaded, items } = this.state;
      if (error) {
        return <div>Ошибка: {error.message}</div>;
      } else if (!isLoaded) {
        return <div>Загрузка...</div>;
      } else {
        return (
          <ul>
            {items.map(item => (
              <li key={item.id}>
                {item.name}
              </li>
            ))}
          </ul>
        );
      }
    }
  }

export default List;