Inserção de um novo card com a listagem das avaliações

[claytoncalixto]

Olá Devs!

Poderiam por gentileza me dar uma ajuda?

Estou tentando adicionar abaixo do card de formulário(form/input), uma lista que deve aparecer um outro card com uma listagem de todas avaliações daquele filme, um card na sequencia do outro, porém quando começo a digitar, as informações são inseridas diretamente, sem clicar no botão salvar e é inserida uma única vez e na verdade que a cada vez que digitasse uma avaliação e clicasse no botão teria que adicionar mais um card com a avaliação…e não estou conseguindo(abaixo esta duplicado pois utilizei dois containers, para testar qual seria melhor opção:

Esta é o código do card MovieDetails:

import { ReactComponent as Start } from 'assets/images/star.svg';
import axios from 'axios';
import { useParams } from 'react-router-dom';
import { Movie } from 'types/movie';
import { BASE_URL } from 'util/requests';
import { hasAnyRoles } from 'util/auth';
import ButtonIcon from 'components/ButtonIcon';
import { useForm } from 'react-hook-form';
import { useEffect, useState } from 'react';
import Evaluation from 'components/Evaluation';
import CommentDetails from 'components/CommentDetails';
import MovieCard from 'components/MovieCard';

import './styles.css';



type FormData = {
  name: string;
  description: string;
};

type UrlParams = {
  moviesId: string;
};

const MovieDetails = () => {
  const { moviesId } = useParams<UrlParams>();

  const [movie, setMovie] = useState<Movie>();

  const { register, handleSubmit } = useForm<FormData>();

  const [formData, setFormData] = useState<FormData>({
    name: '',
    description: '',
  });

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const name = event.target.name;
    const value = event.target.value;

    setFormData({ ...formData, [name]: value });
  };

  const onSubmit = (formData: FormData) => {
    console.log(formData.description);
    formData.description.toString();
  };

  useEffect(() => {
    axios
      .get(`${BASE_URL}/movies/${moviesId}`)
      .then((response) => {
        setMovie(response.data);
      })
      .finally(() => {});
  }, [moviesId]);

  return (
    <div className="movie-details-container">
      <div className="base-card movie-details-card">
        <h2>Tela detalhes do filme id: {moviesId}</h2>
        <div className="colunm">
          {hasAnyRoles(['ROLE_MEMBER']) && <Evaluation movieId={moviesId}/> ? (
            <>
              <div className="text-insert-conatiner">
                <form onSubmit={handleSubmit(onSubmit)}>
                  <input
                    {...register('description')}
                    className="form-control"
                    type="text"
                    placeholder="Deixe sua avaliação aqui"
                    name="description"
                    value={formData.description}
                    onChange={handleChange}
                  />
                  <div className="btn-save-submit">
                    <ButtonIcon text="SALVAR AVALIAÇÃO" />
                  </div>
                </form>
              </div>
            </>
          ):(
            <CommentDetails name={formData.name} text={formData.description} />
          )}

          <div className="movie-details-loader">            
            <div className="name-container" key={movie?.id}>
            <Start  /> {formData.name}
              <div className="row star-movie-name"></div>
              <div className="description-container">
                <MovieCard description={formData.description} /> <br />
                <CommentDetails name={formData.name} text={formData.description} />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default MovieDetails;

Este o código dos cards que estou testando: Comments e Commentsdetails:

import { AxiosRequestConfig } from 'axios';
import CommentDetails from 'components/CommentDetails';
import { useEffect, useState } from 'react';
import { Review } from 'types/review';
import { BASE_URL, requestBackend } from 'util/requests';
import './styles.css';

type Props = {
  movieId: string;
};



const Comment = ({ movieId }: Props) => {
  const [review, setReview] = useState<Review[]>();

   useEffect(() => {
    const params: AxiosRequestConfig = {
      url: `${BASE_URL}/movies/${movieId}`,
      withCredentials: true,
   };

  

    requestBackend(params).then((response) => {
      setReview(response.data);
    });
  }, [movieId]);

  return (
    <div className="base-card comment-card">
      {review?.map((item) => (
        <div key={item.id}>
          <CommentDetails name={item.user.name} text={item.text} />
        </div>
      ))}
    </div>
  );
};

export default Comment;

E

import { ReactComponent as Star } from 'assets/images/star.svg';
import './styles.css';

type Props = {
  name: string;
  text: string;
};

const CommentDetails = ({ name, text }: Props) => {
  return (
    <div className="comment-details-container">
      <div className="comment-details-header">
        <Star /><h1>{name}</h1>
      </div>
      <div className="comment-details-card">
        <p>{text}</p>
      </div>
    </div>
  );
};

export default CommentDetails;