Go to a new page on button click (React Hooks Typescript)

My main page has a button that when on click I want it to show a new page.

I have right now my index page (index.tsx) and the page that I want to show on click (new.tsx) but I don't know how to "call" the component of "new.tsx" or whatever needs to be done.As the code is now it is not capable of displaying the new page.

This is the index page:

interface IPost {    id: number;    title: string;    author: string;    content: string;}const Homepage: React.FC = () => {    const [posts, setPosts] = useState<IPost[]>([]);    // Se llama la función getPosts del archivo functions.js    getPosts()        .then(items => {            setPosts(items)        })    function handleClick() {<div><New /></div>    }    return (<div className="containerHomepage"><div className="containerList"><div className="containerBreadCrumb"><ul className="breadCrumb"><li>Posts</li></ul></div><div className="containerTitleButton"><div className="title">                        Posts</div><button className="button" onClick={handleClick}>New post</button></div>                {posts.map(post =><div className="postCard" key={post.id}><div>                            {post.title}</div><div>                            {post.author}</div></div>                )}</div></div>    );};// ========================================ReactDOM.render(<Homepage />, document.getElementById("root"));

And this is "new.tsx", the page I want to be displayed when the button is clicked:

const New: React.FC = () => {    return (<div className="">            Another page</div>    );};// ========================================ReactDOM.render(<New />, document.getElementById("root"));