[Dúvida] Metodo post do formulario

Olá criei um projeto junto com esse curso só que no meu estilo, não estou conseguindo salvar as informações quando preencho o formulario ao final da pagina, ele deveria salvar e aparecer automaticamente na tela, como posso fazer isso? aqui está meu projeto completo https://github.com/laura-2/ProximaViagem e aqui está o arquivo que estou tentando mandar o metodo post

import React, { useState} from "react";
import './form.css';
import { postViagens } from "../../servicos/viagens";

export default function Form(){
    const [post, setPost] = useState({
        pais: '',
        cidade: '',
        data:'',
        nota: '',
        foto: '',
        descricao: ''
    })
    const handleInput = (event) => {
        setPost({...post, [event.target.name]: event.target.value})
    }

    function handleSubmit(event){
        event.preventDefault()
    }

    async function insertViagem(){
        await postViagens()
        .then(response => console.log(response))
        .catch(err=> console.log(err))
    }
    return(
        <form className="banner" onSubmit={handleSubmit}>
            <h2 className="banner-titulo">Compartilhe sua experiência também!</h2>
            <input type="text" className="banner-caixa" placeholder="Digite o nome do lugar"
            onChange={handleInput} name="pais"/>
            <input type="text" className="banner-caixa" placeholder="Digite o nome da cidade"
            onChange={handleInput} name="cidade"/>
            <input type="date" className="banner-caixa" placeholder="Quando?" onChange={handleInput} name="data"
            />
            <input type="number" className="banner-caixa" placeholder="Qual sua nota para esse lugar?"
            onChange={handleInput} name="nota"/>
            <input type="image" alt="fotos" className="banner-caixa" placeholder="Insira sua fotos" 
            onChange={handleInput} name="foto"/>
            <textarea cols="40" wrap="hard" className="banner-area" placeholder="Conte com mais detalhes sua viagem, por exemplo, o que mais gostou, dicas, valores..."
            onChange={handleInput} name="descricao"></textarea>
            <button className="banner-botão" onClick={()=>insertViagem()}>Compartilhar</button>
        </form>
    )
}

e esse é o erro do console:

POST http://localhost:8000/viagens/ 422 (Unprocessable Entity)

Alguém poderia me dar uma luz?

Obrigada