Как отобразить разный текст в компоненте модального окна в зависимости от нажатой кнопки

Есть две кнопки sign in и sign up, я хочу чтобы при нажатии на sign in в компонент модального окна передавалась та форма которая уже написана, а при нажатии на sign up передавался другой текст , ну например

<p>opened sign up modal window</p>

Как мне это сделать

import { React, useState } from "react"

import styles from "./Header.module.scss"

import Logotype from "../../Assets/Images/Logotype.svg"
import Modal from "./UI/Modal/Modal"

const Header = () => {
  const items = ["Home", "About", "Feature", "Resource"]

  const [modalActive, setModalActive] = useState(false)
  return (
    <>
      <Modal active={modalActive} setActive={setModalActive}>
        <form action=''>
          <h2>Sign in</h2>
          <h3>Title for description</h3>
          <p>Логин:</p>
          <input type='text' placeholder='Email' />
          <error>Поле обязательно к заполнению</error>
          <p>Пароль:</p>
          <input type='text' placeholder='Password' />
          <error>Поле обязательно к заполнению</error>
          <button type='button' disabled>Sign In</button>
        </form>
      </Modal>
      <div className={styles.wrapper}>
        <div className={styles.logotype}>
          <img className={styles.stretchRight} src={Logotype} alt='Logotype' />
        </div>
        <div className={styles.navBar}>
          {items.map(item => (
            <p key={item} className={styles.item}>
              {item}
            </p>
          ))}
        </div>
        <div className={styles.authButtons}>
          <button
            className={styles.btnSignIn}
            onClick={() => setModalActive(true)}
          >
            Sign In
          </button>
          <button className={styles.btnSignUp}>Sign Up</button>
        </div>
      </div>
    </>
  )
}

export default Header