Проблемы с автоматическим обновлением DOM в React

Есть в переменной массив с объектами:

let list = [
  { id: 1, test: 1 },
  { id: 2, test: 2 }
]

Также есть компонент, который выводит в DOM (table) содержимое объектов с помощью map:

function Tbody() {

        return(
            <tbody>
            {
                list.map(item => {
                    return <tr key={item.id}>
                        <td>{item.id}</td>
                        <td>{item.test}</td>
                    </tr>
                })
            }
            </tbody>
        )
    }

Как сделать, чтобы DOM с таблицей автоматически обновлялся, если в массив добавляется новый объект? По условию можно использовать только функциональные компоненты.