POST request to JSONPlaceholder not taking effect in later fetch

I have sorted the posts with get method using typicode. Now I want to add it myself using the post method. How can I do it properly?

The problem here is that even if it is posted, it does not appear in the posts list. I want it to appear in all posts when I add it myself and see it in the ranking. How can I do it?

import axios from "axios";
import React from "react";
import { useState } from "react";
import { useNavigate } from "react-router-dom";
const Form = ({ mainData, setData }) => {
  const [formData, setFormData] = useState({
    title: "",
    body: "",
  });

  const history = useNavigate();

  const onChange = (e) => {
    setFormData({[e.target.name]: e.target.value });
  };

  const onSubmit = (e) => {
    e.preventDefault();
    history("/");
    axios
      .post("https://jsonplaceholder.typicode.com/posts", formData)
      .then((res) => {
        console.log(res);
      });
  };
  return (
    <form onSubmit={onSubmit}>
      <input
        type="text"
        placeholder="your title"
        name="title"
        value={formData.title}
        onChange={onChange}
      />
      <input
        type="text"
        placeholder="body"
        name="body"
        value={formData.body}
        onChange={onChange}
      />
      <button type="submit">Submit</button>
    </form>
  );
};

export default Form;

import React from "react";
import axios from "axios";
import { useEffect, useState } from "react";
import { NavLink } from "react-router-dom";

const Posts = ({mainData, setData}) => {

  useEffect(() => {
    axios
      .get("https://jsonplaceholder.typicode.com/posts")
      .then((res) => res)
      .then((res) => {
        setData(res.data);
        console.log(mainData);
      });
  }, []);
  return (
    <>
      <NavLink to="/new">Add new post</NavLink>
      {mainData?.map((item, index) => (
        <h4 key={index}>
          {item.id} : {item.title}
        </h4>
      ))}
    </>
  );
};

export default Posts;

import React, {useState} from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Form from "../Form";
import Posts from "../Posts";
const Rout = () => {

  const [mainData, setData] = useState([]);

  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Posts mainData={mainData} setData={setData}/>} ></Route>
        <Route path="/new" element={<Form mainData={mainData} setData={setData}/>}></Route>
      </Routes>
    </BrowserRouter>
  );
};

export default Rout;