How to perform conditional rendering on a Popup in react

I am developing a website using React and Tailwind. I want to do conditional rendering on a Popup Component in react and I am stuck, while trying to do so. These are the designs of the two pages:

I have created both these pages as separate components and I tried to use useState to conditionally render both these pages in my react application. But for some reason, I am unable to do so and even when I initialized the state to be true, when I console log i get the State as false.

Here is the Popup code:

import React from 'react';
import { useState } from 'react';
import { MayaLogo, Avatar, Icon } from 'crayon-ui-kit';
import Searchbar from './Searchbar';
import ServicesComponent from './ServicesComponent';
import Reveal from './Reveal';
import './Popup.css';

const SelectSource = (props) => {
  return props.trigger ? (
    <div className="popup" onClick={() => props.setTrigger(false)}>
      <div className="popup-inner" onClick={(e) => e.stopPropagation()}>
        <div className="side">
          <div className="logo">
            <MayaLogo name="HorizontalLogo" size="112" background="light" />
          </div>
          <div className="petrol-image"></div>
          <div className="side-text">
            <Reveal>
              <span className="grey-text">Step 1</span>
            </Reveal>
            <Reveal>
              <h2 className="sourcePick">Pick a Source</h2>
            </Reveal>
            <Reveal>
              <p className="grey-text">
                You have no connector selected. Please select a source connector
                from our wide range of options to proceed
              </p>
            </Reveal>
          </div>
        </div>
        <button className="close-btn" onClick={() => props.setTrigger(false)}>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
          >
        </button>
        <div className="select-side">
          <div className="step-pages">
            <div className="sourceSelectButton">
              <div className="--active-number">1</div>
              <span className="--active-step">Select a Source</span>
            </div>
            <div className="ConfigureButton">
              <div className="--inactive-number">2</div>
              <span className="--inactive-step">Configure</span>
            </div>
          </div>
          <Reveal>
            <Searchbar />
          </Reveal>
          <Reveal>
            <ServicesComponent setSourceSelect={props.setSourceSelect} />
          </Reveal>
        </div>
      </div>
    </div>
  ) : (
    ''
  );
};

const Configure = (props) => {
  return props.trigger ? (
    <div className="popup" onClick={() => props.setTrigger(false)}>
      <div className="popup-inner" onClick={(e) => e.stopPropagation()}>
        <div className="side">
          <div className="logo">
            <MayaLogo name="HorizontalLogo" size="112" background="light" />
          </div>
          <div className="petrol-image"></div>
          <div className="side-text">
            <Reveal>
              <span className="grey-text">Step 2</span>
            </Reveal>
            <Reveal>
              <h2 className="sourcePick">Configure</h2>
            </Reveal>
            <Reveal>
              <p className="grey-text">
                You have no connector selected. Please select a source connector
                from our wide range of options to proceed
              </p>
            </Reveal>
          </div>
        </div>
        <button className="close-btn" onClick={() => props.setTrigger(false)}>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
          >
        </button>
        <div className="select-side">
          <div className="step-pages">
            <div className="sourceSelectButton">
              <div className="--active-number">1</div>
              <span className="--active-step">Select a Source</span>
            </div>
            <div className="ConfigureButton">
              <div className="--inactive-number">2</div>
              <span className="--inactive-step">Configure</span>
            </div>
          </div>
          <Reveal>
            <Searchbar />
          </Reveal>
        </div>
      </div>
    </div>
  ) : (
    ''
  );
};

function Popup(props) {
  const [Flag, setFlag] = useState(true);
  console.log(Flag);
  if (Flag) {
    return (
      <SelectSource
        trigger={props.trigger}
        setTrigger={props.setTrigger}
        SourceSelect={Flag}
        setSourceSelect={setFlag}
      />
    );
  }
  if (!Flag) {
    return (
      <Configure
        trigger={props.trigger}
        setTrigger={props.setTrigger}
        SourceSelect={Flag}
        setSourceSelect={setFlag}
      />
    );
  }
}

export default Popup;

Here , Reveal is just an animation component I created. As we can see I have set the Flag's Initial state to be true, and the props are the trigger and setTrigger state functionality for opening and closing the popup.

I then pass the flag and SetFlag to these both components and the services components are the button icon and if we click the button we should be able to go to the next page(i.e Step 2 Configure page). But, when I console logged the value of Flag, I got it as undefined.

The code for the services component is:

import React from 'react';
import './ServicesComponent.css';

import { companies } from '../constants';
import Image from 'next/image';
const ServicesComponent = (props) => {
  return (
    <div className="servicesList">
      {companies.map((service, index) => {
        return (
          <div className="element_service">
            <span className="service_title" id={service.index}>
              {service.title}
            </span>

            <div className="outer-box">
              {service.company.map((value, index_v) => (
                <button
                  onClick={props.setSourceSelect(props.SourceSelect, false)}
                >
                  <div className="box1" key={index_v}>
                    <Image
                      src={value.icon}
                      alt="company_img"
                      className="company_img"
                    />
                    <div className="box2">
                      <span className="company_name">{value.name}</span>
                      <span className="desc">{value.description}</span>
                    </div>
                  </div>
                </button>
              ))}
            </div>
          </div>
        );
      })}
      <div className="list"></div>
    </div>
  );
};

export default ServicesComponent;

I dont know what is wrong with my code. If anybody can provide any insights it will be really helpful.

Looking at your code i've seen that you are passing two arguments to the setFlag useState function. This will cause an error because it is expecting just one argument.

this is your code:

<button
     onClick={props.setSourceSelect(props.SourceSelect, false)}
>

And this is the correct one:

<button
     onClick={props.setSourceSelect(!props.SourceSelect)}
>

This way you set the flag state to false if it is true and true if it is false, switching between your content.