Erro Jquery

Oi, Renato, tudo bem?

Eu testei a seu código e não recebi nenhum erro quando adiciono mais um livro-autor na tabela: https://imgur.com/a/YYkqmz3

Qual a mensagem de erro que você recebe?

No seu arquivo header.jsx renomeie as class para className. Class é uma palavra reservada.

Desculpa esqueci de especificar que o erro acontece quando eu forço um erro, na aula o professor está implementando uma tost notificação e quando eu vou exibir a mensagem de erro ele reclama do jquery

O erro que ele exibe é esse:

TypeError: Cannot read property 'jquery' of undefined
Toast._createToast
node_modules/materialize-css/dist/js/materialize.js:5177
  5174 |   toast.appendChild(this.message);
  5175 | 
  5176 |   // Check if it is jQuery object
> 5177 | } else if (!!this.message.jquery) {
       | ^  5178 |   $(toast).append(this.message[0]);
  5179 | 
  5180 |   // Insert as html;
View compiled
new Toast
node_modules/materialize-css/dist/js/materialize.js:5148

  5146 | // Create new toast
  5147 | Toast._toasts.push(this);
> 5148 | var toastElement = this._createToast();
       | ^  5149 | toastElement.M_Toast = this;
  5150 | this.el = toastElement;
  5151 | this.$el = $(toastElement);
View compiled
push../node_modules/materialize-css/dist/js/materialize.js.M.toast
node_modules/materialize-css/dist/js/materialize.js:5455
  5452 | 
  5453 |   M.Toast = Toast;
  5454 |   M.toast = function (options) {
> 5455 |     return new Toast(options);
  5456 |   };
  5457 | })(cash, M.anime);
  5458 | ;(function ($, anim) {
View compiled
exibeMensagem
src/PopUp.js:11
   8 |     }
   9 | 
  10 |     if (status === 'error') {
> 11 |       M.toast({ html: msg, classes: 'red', displayLength: 2000 });
  12 |     }
  13 |   }
  14 | }
View compiled
(anonymous function)
src/components/Formulario.jsx:63
  60 |   })
  61 | 
  62 |   camposInvalidos.forEach(campo =>{
> 63 |     PopUp.exibeMensagem('error', campo.mensagem)
     | ^  64 |   } );
  65 | 
  66 | }
View compiled
submitForm
src/components/Formulario.jsx:62
  59 |   return elem.isInvalid
  60 | })
  61 | 
> 62 | camposInvalidos.forEach(campo =>{
     | ^  63 |   PopUp.exibeMensagem('error', campo.mensagem)
  64 | } );
  65 | 

Oi, Renato, tudo bem?

Acredito que você não queira usar o Jquery para manipular o DOM, certo? O erro está nessa linha do seu formulário.jsx:

PopUp.exibeMensagem('error', campo.mensagem) 

o correto é:

PopUp.exibeMensagem('error', campo.message)

Corrigindo essa linha o erro desaparece.

Espero ter te ajudado!

Deu certo, obrigado, nem vi que tinha escrito errado !