making tabs in react for two different pages

I'm trying to make tabs in reactjs but couldn't do it

what I want is to have tabs between sign-in and signup pages

both of the pages have a separate component

I know that I'm missing something but not sure where it is

here is my code

import React, { useState } from "react";
import Login from "./Login";
import SignUp from "./SignUp";

const Tabs = () => {
  const [login, setLogin] = useState(true);
  const [signup, setSignUp] = useState(true);

  const handleLogin = () => {
    setLogin(true);
    setSignUp(false);
  };

  return (
    <>
      <div className="tabs">
        <button onClick={() => setLogin(true)}> Üyelik Girişi</button>
        <button onClick={() => setLogin(false)}>Yeni Uyelik</button>
        {signup && <SignUp />}
        {/* {login && <Login />} */}
      </div>
    </>
  );
};

export default Tabs;

So, what I can't figure out is how to direct the function to the desired page

so, this code works well for me the problem of rendering two components under each other was because using routers in the App.js

after i have removed it, it worked fine with me

import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
// import "react-tabs/style/react-tabs.css";
import "./Tabs.css";
import React from "react";
import Login from "./Login";
import SignUp from "./SignUp";

const LoginTabs = () => {
  return (
    <>
      <Tabs>
        <TabList>
          <Tab>Üyelik Girişi</Tab>
          <Tab>Yeni Üyelik</Tab>
        </TabList>

        <TabPanel>
          <h2>
            {" "}
            <Login />{" "}
          </h2>
        </TabPanel>
        <TabPanel>
          <h2>
            {" "}
            <SignUp />{" "}
          </h2>
        </TabPanel>
      </Tabs>
    </>
  );
};

export default LoginTabs;