How to link button from one page to do something on other – Reactjs

I have button ,,Submit" on register page, and imported another page to display, and i need to use that button from register page to submit things on that imported one, how you see in my code bellow, i "open these pages" in my main register page so its same page and its not ….

Thats how that main register page looks like

How you see, button on main page, and that form linked from different one
My main gole is to make that button disabled if form is not filled right . . i have done everything on that from, but i dont know how to link that button to it

Main Register Page:

import React, { useRef, useState, useEffect } from "react";
import Button from '@mui/material/Button';
import RegisterS1 from "./registerS1";
import RegisterS2 from "./registerS2";
import RegisterS3 from "./registerS3";
import RegisterS4 from "./registerS4";
import RegisterS5 from "./registerS5";
import RegisterS6 from "./registerS6";
import RegisterS7 from "./registerS7";
import './register.css';

    return (
      <>
        <div>
            {activeStep == 1 && <Button onClick={handleNext}>Skip</Button>}
            {activeStep > 0 && <Button onClick={handleBack}>Back</Button>}
            {activeStep === 0 && <RegisterS1 />}
            {activeStep === 1 && <RegisterS2 />}
            {activeStep === 2 && <RegisterS3 />}
            {activeStep === 3 && <RegisterS4 />}
            {activeStep === 4 && <RegisterS5 />}
            {activeStep === 5 && <RegisterS6 />}
            {activeStep === 6 && <RegisterS7 />}
            <div>
            <Button
              style={{
                position: "relative", 
                marginLeft: "16vw",
                marginTop: "2vh",
              }}
              disabled={localStorage.registerForm.includes("false")}
              onClick={handleNext} 
              size="large" 
              variant="contained" 
              endIcon={<NavigateNextIcon />}
            >Submit</Button>
            </div>
          </div>
        </div>
      </>
    );
};

RegisterS1

import { useRef, useState, useEffect } from "react";
import React from 'react';
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';

const FIRSTNAME_REGEX = /^[A-ZĽŠČŤŽ][a-zľščťžýáíéúň]{1,23}$/;
const LASTNAME_REGEX = /^[A-ZĽŠČŤŽ][a-zľščťžýáíéúň]{1,23}$/;
const USERNAME_REGEX = /^[a-zA-Z0-9]{1,23}$/;
const EMAIL_REGEX = /^[a-zA-Z0-9](?=.*[@]).{5,30}$/;
const PWD_REGEX = /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9]).{8,24}$/;


export default function RegisterS1() {

  const [firstname, setFirstname] = useState("");
  const [validFirstname, setValidFirstname] = useState(false);

  const [lastname, setLastname] = useState("");
  const [validLastname, setValidLastname] = useState(false);

  const  = useState("");
  const [validUsername, setValidUsername] = useState(false);

  const [email, setEmail] = useState("");
  const [validEmail, setValidEmail] = useState(false);

  const [pwd, setPwd] = useState("");
  const [validPwd, setValidPwd] = useState(false);

  const [matchPwd, setMatchPwd] = useState("");
  const [validMatch, setValidMatch] = useState(false);

  useEffect(() => {
    if(localStorage.registerForm === undefined) {
      var registerForm = ["", "", "", "", "", ""];
      localStorage.registerForm = JSON.stringify(registerForm);
      setFirstname(registerForm[0]);
      setLastname(registerForm[1]);
      setUsername(registerForm[2]);
      setEmail(registerForm[3]);
      setPwd(registerForm[4]);
      setMatchPwd(registerForm[5]);
    } else {
      var registerForm = (JSON.parse(localStorage.registerForm));
      setFirstname(registerForm[0]);
      setLastname(registerForm[1]);
      setUsername(registerForm[2]);
      setEmail(registerForm[3]);
      setPwd(registerForm[4]);
      setMatchPwd(registerForm[5]);
    };
  }, []);

  useEffect(() => {
    setValidFirstname(FIRSTNAME_REGEX.test(firstname));
  }, [firstname]);

  useEffect(() => {
    setValidLastname(LASTNAME_REGEX.test(lastname));
  }, [lastname]);

  useEffect(() => {
    setValidUsername(USERNAME_REGEX.test(username));
  }, );

  useEffect(() => {
      setValidEmail(EMAIL_REGEX.test(email));
  }, [email]);

  useEffect(() => {
    setValidPwd(PWD_REGEX.test(pwd));
    setValidMatch(pwd === matchPwd);
  }, [pwd, matchPwd]);

  useEffect(() => {
    let registerForm = [firstname, lastname, username, email, pwd, matchPwd];
    const v1 = FIRSTNAME_REGEX.test(firstname);
    const v2 = LASTNAME_REGEX.test(lastname);
    const v3 = USERNAME_REGEX.test(username);
    const v4 = EMAIL_REGEX.test(email);
    const v5 = PWD_REGEX.test(pwd);
    if (!v1 || !v2 || !v3 || !v4 || !v5 || pwd != matchPwd) {
      var setSuccess = false;
    } else { var setSuccess = true; };
    registerForm.push(setSuccess)
    localStorage.registerForm = JSON.stringify(registerForm);
  }, [firstname, lastname, username, email, pwd, matchPwd]);

  return(
    <>
      <div>
       <Box
        component="form"
        sx={{'& .MuiTextField-root': { m: 1, width: '25ch' },}}
        noValidate
        autoComplete="off"
       >
       <div>
         <TextField
           focused
           error={!validFirstname && firstname}
           id="first-name"
           type="text"
           label="First Name"
           variant="filled"
           color={!firstname ? "" : validFirstname ? "success" : ""}
           onChange={(e) => setFirstname(e.target.value)}
           value={firstname}
           helperText={!firstname ? "" : !validFirstname ? "Must begin with a capital letter. Only Letters are allowed." : ""}
           style={{marginLeft: "4vw", marginTop: "7vh", width: '15vw'}}
         />
         <TextField
           focused
           error={!validLastname && lastname}
           id="last-name"
           type="text"
           label="Last Name"
           variant="filled"
           color={!lastname ? "" : validLastname ? "success" : ""}
           onChange={(e) => setLastname(e.target.value)}
           value={lastname}
           helperText={!lastname ? "" : !validLastname ? "Must begin with a capital letter. Only Letters are allowed." : ""}
           style={{marginTop: "7vh", width: '15vw'}}
         />
       </div>
       <div>
       <TextField
           focused
           fullWidth
           error={!validUsername && username}
           id="username"
           type="text"
           label="Username"
           variant="filled"
           color={!username ? "" : validUsername ? "success" : ""}
           onChange={(e) => setUsername(e.target.value)}
           value={username}
           helperText={!username ? "" : !validUsername ? "Incorrect entry." : ""}
           style={{marginLeft: "4vw", marginTop: "1vh", width: '15vw'}}
         />
         <TextField
           focused
           fullWidth
           error={!validEmail && email}
           id="email"
           type="text"
           label="Email"
           variant="filled"
           color={!email ? "" : validEmail ? "success" : ""}
           onChange={(e) => setEmail(e.target.value)}
           value={email}
           helperText={!email ? "" : !validEmail ? "Incorrect entry, only gmail.com is allowed." : ""}
           style={{marginTop: "1vh", width: '15vw'}}
         />
       </div>
       <div>
         <TextField
           focused
           fullWidth
           error={!validPwd && pwd}
           id="password"
           type="password"
           label="Password"
           variant="filled"
           color={!pwd ? "" : validPwd ? "success" : ""}
           onChange={(e) => setPwd(e.target.value)}
           value={pwd}
           helperText={!pwd ? "" : !validPwd ? "Must contain 8 to 24 characters. Must include uppercase and lowercase letters, and a number. All special characters are allowed." : ""}
           style={{marginLeft: "4vw", marginTop: "1vh", width: '31vw'}}
         />
       </div>
       <div>
         <TextField
           focused 
           fullWidth
           error={!validMatch && matchPwd || !validPwd && matchPwd}
           id="confirm_password"
           type="password"
           label="Confirm Password"
           variant="filled"
           color={!matchPwd ? "" : validPwd && validMatch ? "success" : ""}
           onChange={(e) => setMatchPwd(e.target.value)}
           value={matchPwd}
           helperText={!matchPwd ? "" : !validMatch ? "Password not Match!" : validPwd ? "" : "Weak Password"}
           style={{marginLeft: "4vw", marginTop: "1vh", width: '31vw'}}
         />
       </div>
       </Box>
      </div>
    </>
  );

i tryed to save button click to local storage, but not working