Does not see the function when outputting reactjs

On the main page without a Header, this function works. I want to make it on a separate page, it doesn't work. I looked at examples, everything converges, does not display on a separate page. Аrom addpeople to add, header(example <\h1>text<\h1> or other works.

\addpeople.js

import React, { Component } from 'react';
import "./add.css";
import { useState } from "react";
import Axios from "axios";
import { Button } from "react-bootstrap";
import 'bootstrap/dist/css/bootstrap.min.css';


function newcreate() {
        return (


        function App() {
            const [surename_ru, setSurename_ru] = useState("");
            const [name_ru, setName_ru] = useState(0);
            const [fname_ru, setFname_ru] = useState("");
            const [surename_en, setSurename_en] = useState("");
            const [name_en, setName_en] = useState(0);
            const [gender, setGender] = useState("");
            const [dateofbirth, setDateofbirth] = useState(0);
            const [citizenship, setCitizenship] = useState("");
            const [pas_ser, setPas_ser] = useState("");
            const [pas_num, setPas_num] = useState(0);
            const [pas_start, setPas_start] = useState("");
            const [pas_end, setPas_end] = useState(0);
            const [pas_given, setPas_given] = useState("");
            const [pas_givenkod, setPas_givenkod] = useState("");
            const [inn_num, setInn_num] = useState(0);
            const [snils_num, setSnils_num] = useState("");
            const [legal_type, setLegal_type] = useState(0);


            const [newWage, setNewWage] = useState(0);

            const [employeeList, setEmployeeList] = useState([]);

            const addEmployee = () => {
                Axios.post("http://localhost:3001/create", {
                    surename_ru: surename_ru,
                    name_ru: name_ru,
                    fname_ru: fname_ru,
                    surename_en: surename_en,
                    name_en: name_en,
                    gender: gender,
                    dateofbirth: dateofbirth,
                    citizenship: citizenship,
                    pas_ser: pas_ser,
                    pas_num: pas_num,
                    pas_start: pas_start,
                    pas_end: pas_end,
                    pas_given: pas_given,
                    pas_givenkod: pas_givenkod,
                    inn_num: inn_num,
                    snils_num: snils_num,
                    legal_type: legal_type,
                }).then(() => {
                    setEmployeeList([
                        ...employeeList,
                        {
                            surename_ru: surename_ru,
                            name_ru: name_ru,
                            fname_ru: fname_ru,
                            surename_en: surename_en,
                            name_en: name_en,
                            gender: gender,
                            dateofbirth: dateofbirth,
                            citizenship: citizenship,
                            pas_ser: pas_ser,
                            pas_num: pas_num,
                            pas_start: pas_start,
                            pas_end: pas_end,
                            pas_given: pas_given,
                            pas_givenkod: pas_givenkod,
                            inn_num: inn_num,
                            snils_num: snils_num,
                            legal_type: legal_type,
                        },
                    ]);
                });
            };

            const getEmployees = () => {
                Axios.get("http://localhost:3001/employees").then((response) => {
                    setEmployeeList(response.data);
                });
            };

            const updateEmployeeWage = (id) => {
                Axios.put("http://localhost:3001/update", { wage: newWage, id: id }).then(
                    (response) => {
                        setEmployeeList(
                            employeeList.map((val) => {
                                return val.id == id
                                    ? {
                                        surename_ru: val.surename_ru,
                                        name_ru: val.name_ru,
                                        fname_ru: val.fname_ru,
                                        surename_en: val.surename_en,
                                        name_en: val.name_en,
                                        gender: val.gender,
                                        dateofbirth: val.dateofbirth,
                                        citizenship: val.citizenship,
                                        pas_ser: val.pas_ser,
                                        pas_num: val.pas_num,
                                        pas_start: val.pas_start,
                                        pas_end: val.pas_end,
                                        pas_given: val.pas_given,
                                        pas_givenkod: val.pas_givenkod,
                                        inn_num: val.inn_num,
                                        snils_num: val.snils_num,
                                        legal_type: val.legal_type,
                                    }
                                    : val;
                            })
                        );
                    }
                );
            };

            const deleteEmployee = (id) => {
                Axios.delete(`http://localhost:3001/delete/${id}`).then((response) => {
                    setEmployeeList(
                        employeeList.filter((val) => {
                            return val.id != id;
                        })
                    );
                });
            };

            return (
                <div className="App">
                    <div className="information">
                        <label>Фамилия</label>
                        <input
                            type="text"
                            onChange={(event) => {
                                setSurename_ru(event.target.value);
                            }}
                        />
                        <label>Имя РУС</label>
                        <input
                            type="text"
                            onChange={(event) => {
                                setName_ru(event.target.value);
                            }}
                        />
                        <label>Отчество</label>
                        <input
                            type="text"
                            onChange={(event) => {
                                setFname_ru(event.target.value);
                            }}
                        />
                        <label>Surename EN</label>
                        <input
                            type="text"
                            onChange={(event) => {
                                setSurename_en(event.target.value);
                            }}
                        />
                        <label>Name EN</label>
                        <input
                            type="text"
                            onChange={(event) => {
                                setName_en(event.target.value);
                            }}
                        />
                        <label>gender</label>
                        <input
                            type="text"
                            onChange={(event) => {
                                setGender(event.target.value);
                            }}
                        />
                        <label>Data ROJD</label>
                        <input
                            type="text"
                            onChange={(event) => {
                                setDateofbirth(event.target.value);
                            }}
                        />
                        <label>Citizenship</label>
                        <input
                            type="text"
                            onChange={(event) => {
                                setCitizenship(event.target.value);
                            }}
                        />
                        <label>Pas SER</label>
                        <input
                            type="text"
                            onChange={(event) => {
                                setPas_ser(event.target.value);
                            }}
                        />
                        <label>Pas NUM</label>
                        <input
                            type="text"
                            onChange={(event) => {
                                setPas_num(event.target.value);
                            }}
                        />
                        <label>Pas Start</label>
                        <input
                            type="text"
                            onChange={(event) => {
                                setPas_start(event.target.value);
                            }}
                        />
                        <label>Pas End</label>
                        <input
                            type="text"
                            onChange={(event) => {
                                setPas_end(event.target.value);
                            }}
                        />
                        <label>Pas Given</label>
                        <input
                            type="text"
                            onChange={(event) => {
                                setPas_given(event.target.value);
                            }}
                        />
                        <label>Pas Givenkod</label>
                        <input
                            type="text"
                            onChange={(event) => {
                                setPas_givenkod(event.target.value);
                            }}
                        />
                        <label>inn_num</label>
                        <input
                            type="text"
                            onChange={(event) => {
                                setInn_num(event.target.value);
                            }}
                        />
                        <label>snils_num</label>
                        <input
                            type="text"
                            onChange={(event) => {
                                setSnils_num(event.target.value);
                            }}
                        />
                        <label>legal Type</label>
                        <input
                            type="text"
                            onChange={(event) => {
                                setLegal_type(event.target.value);
                            }}
                        />
                        <button onClick={addEmployee}>Add Employee</button>
                    </div>
                    <div className="employees">
                        <button onClick={getEmployees}>Show Employees</button>

                        {employeeList.map((val, key) => {
                            return (
                                <div className="employee">
                                    <div>
                                        <h3>surename_ru: val.surename_ru</h3>
                                        <h3>name_ru: val.name_ru</h3>
                                        <h3>fname_ru: val.fname_ru</h3>
                                        <h3>surename_en: val.surename_en</h3>
                                        <h3>name_en: val.name_en</h3>
                                        <h3>gender: val.gender</h3>
                                        <h3>dateofbirth: val.dateofbirth</h3>
                                        <h3>citizenship: val.citizenship</h3>
                                        <h3>pas_ser: val.pas_ser</h3>
                                        <h3>pas_num: val.pas_num</h3>
                                        <h3>pas_start: val.pas_start</h3>
                                        <h3>pas_end: val.pas_end</h3>
                                        <h3>pas_given: val.pas_given</h3>
                                        <h3>pas_givenkod: val.pas_givenkod</h3>
                                        <h3>inn_num: val.inn_num</h3>
                                        <h3>snils_num: val.snils_num</h3>
                                        <h3>legal_type: val.legal_type</h3>
                                    </div>
                                    <div>
                                        <input
                                            type="text"
                                            placeholder="2000..."
                                            onChange={(event) => {
                                                setNewWage(event.target.value);
                                            }}
                                        />
                                        <button variant="primary"
                                            onClick={() => {
                                                updateEmployeeWage(val.id);
                                            }}
                                        >
                                            {" "}
                                            Update
                                        </button>

                                        <button variant="primary"
                                            onClick={() => {
                                                deleteEmployee(val.id);
                                            }}
                                        >
                                            Delete
                                        </button>
                                    </div>
                                </div>
                            );
                        })}
                    </div>
                </div>
            );
        }
    )
}

export default newcreate;

\add.js

import React, { Component } from 'react';
import newcreate from './addpeople';


function add() {
    return (
        <div>
            <div>
                <newcreate />
            </div>
        </div>
    );
}

export default add;