I put children in the common modal, but it doesn't work

Question

I'm trying to display the modal with overlapping routing at home, but I found out that it's children, and while I was trying, my parent modal didn't get any child components. I tried many things through search, but I don't know how. I got all the codes related to modal below.

// src/modals/Modal.js

import React from "react";
import styles from "./Modal.module.css";

function Modal({ state, closeModal, chilren }) {
  return state ? (
    <div className={styles.container}>
      <div className={styles.overlay} onClick={closeModal} />
      <div className={styles.modalBox}>
        <button className={styles.closeButton} onClick={closeModal}>
          &times;
        </button>
        <div>{chilren}</div>
      </div>
    </div>
  ) : null;
}

export default Modal;

// src/modals/Signs/SignIn.js

import React from "react";
import styles from "./SignIn.module.css";
import Modal from "../Modal";

function SignIn({ closeModal }) {
  return (
    <div>
      <Modal closeModal={closeModal}>signin</Modal>
    </div>
  );
}

export default SignIn;

// src/components/Navbar.js

import { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import Modal from "../modals/Modal";
import SignIn from "../modals/Signs/SignIn";
import SignUp from "../modals/Signs/SignUp";

function Navbar() {
  const [openModal, setOpenModal] = useState(false);
  const [chageModal, setChageModal] = useState("signIn");
  const modalOpen = (e) => {
    if (e.target.name === "signIn") {
      setChageModal("signIn");
    } else {
      setChageModal("signUp");
    }
    setOpenModal(true);
  };

  const transModal = () => {
    setChageModal("signUp");
  };

  const closeModal = () => {
    setOpenModal(false);
  };

...ellipsis

  return (

...ellipsis

      <Modal state={openModal} closeModal={closeModal}>
        {chageModal === "signIn" && <SignIn chage={transModal} />}
        {chageModal === "signUp" && <SignUp />}
      </Modal>
);
}

export default Navbar;

// src/App.js

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import { RecoilRoot } from "recoil";
import Home from "./routes/Home";
import Detail from "./routes/Detail";
import Navbar from "./components/Navbar";
import SignIn from "./modals/Signs/SignIn";
import SignUp from "./modals/Signs/SignUp";

function App() {
  return (
    <RecoilRoot>
      <Router>
        <Navbar />
        <Routes>
          <Route path={"/"} element={<Home />}>
            <Route path={"/signin"} element={<SignIn />} />
            <Route path={"/signup"} element={<SignUp />} />
          </Route>
          <Route path={`/movie/:id`} element={<Detail />} />
        </Routes>
      </Router>
    </RecoilRoot>
  );
}
export default App;

When i open the modal, the letters signIn or signUp should appear, but only the parent modal elements are shown.

Answer 1

Can you check the spelling of children? It should be children but you have mistakenly written chilren.