+register but have some probles with overlooped renders in register form

src/App.js

@@ -3,6 +3,7 @@ import './App.scss';
 import Header from './components/Header';
 import Main from './components/MainPage/Main';
 import CLoginForm from './components/LoginPage/Login';
+import Register from './components/RegisterPage/Register';
 import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
 import createHistory from "history/createBrowserHistory";
 import { Provider } from 'react-redux';
@@ -17,6 +18,7 @@ function App() {
       <Switch>
     <div className="App">
         <Route exact path="/login" component={CLoginForm}/>
+        <Route exact path="/register" component={Register}/>
         <Route exact path="/" component={Header}/>
         <Route exact path="/" component={Main}/>
         <Route exact path="/collections" component={Header}/>

src/components/LoginPage/Login.js

@@ -6,7 +6,6 @@ import {Link} from "react-router-dom"
 const Login = ({onLogin}) => {
        const[login,setLogin] = useState('');
        const[password,setPassword] = useState(''); 
-
     return (
         <div className="min-h-full flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
                 <div className="max-w-md w-full space-y-8">

src/components/RegisterPage/Register.js

@@ -0,0 +1,61 @@
+import { useState } from "react";
+import { Link } from "react-router-dom";
+
+
+const Register = () => {
+
+    const [login, setLogin] = useState("");
+    const [password, setPassword] = useState("");
+    const [confpassword, setConfPassword] = useState("");
+    const [errmsg, setErrMsg] = useState("");
+    const min = 4;
+    const pswdPattern = /^[0-9a-zA-Z]+$/;
+    const validate = () => {
+        if(password.length > min && confpassword.length > min && password.match(pswdPattern)&& confpassword.match(pswdPattern) && password === confpassword){
+            console.log("all ok")
+    } else {
+        setErrMsg("password not match");
+    } 
+    }
+    
+   /*  */
+    return(
+        <div className="min-h-full flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
+        <div className="max-w-md w-full space-y-8">
+                <div>
+                    <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">Register</h2>
+                </div>
+                <div className="mt-8 space-y-6 rounded-md shadow-sm ">
+                    <div>
+                    <label>Login:</label>
+                    <input placeholder="login" value={login} type="text" className="LoginInput" onChange={event => setLogin(event.target.value)}/>
+                    </div>
+                    <div>
+                    <label>Password:</label>
+                    <input placeholder="password" value={password} type="password" className="LoginInput" onChange={event => setPassword(event.target.value)}/>
+                    </div>
+                    <div>                    
+                    <label>Confirm Password:</label>
+                    <input placeholder="password" value={confpassword} type="password" className="LoginInput" onChange={event => setConfPassword(event.target.value)}/>
+                    </div>
+                    <label className="text-red-400">
+                            {errmsg}
+                    </label>
+                    <div className="text-gray-400">
+                    You have account? 
+                        <Link  className="text-gray-600 hover:underline hover:text-fuchsia-600" to="/login"> Login</Link>
+                    </div>
+                   <button className="LoginButton" disabled={errmsg} onClick={event => console.log(event)}>Register</button>
+                </div>
+        </div>
+</div>
+    )
+
+
+}
+
+
+
+
+
+export default Register;