REST Countries with color theme toggler

I've refrained from using react-router-dom or anything that could help in rendering pages or routes. Instead, I wrote my code to render different pages using the optional rendering method.

import { useState } from "react";
import MainPage from "./MainPage";
import DetailPage from "./DetailPage";

function App () {

const [ isDetailPageActive, setIsDetailPageActive ] = useState(false);

return (
<div>
{isDetailPageActive ? <MainPage /> : <DetailPage />}
</div>
)

}

export default App;

Obviously, this is a dumbed-down version of it, but basically, both MainPage and DetailPage components can control which of which should be rendered. While I did manage to make it work, I would still love to learn how to do it properly. Where should I start? And please if possible, I'd like to stay away from react-router-dom as it was too confusing for me.