title: findDOMNode is deprecated in StrictMode error comes in Reactjs
body: <p>Everything works fine but when I submit data for the first time , this error comes. <strong>findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference.</strong>
  What am I doing wrong?</p>
  <pre><code>import {Button, FormControl, FormHelperText, Grid, IconButton, InputAdornment, makeStyles, Paper, Snackbar, TextField, Typography} from '@material-ui/core';
  
  import React from 'react';
  import PersonIcon from '@material-ui/icons/Person';
  import {Visibility, VisibilityOff} from '@material-ui/icons';
  import InputLabel from '@material-ui/core/InputLabel';
  import Input from '@material-ui/core/Input';
  import VpnKeyIcon from '@material-ui/icons/VpnKey';
  import {Link, useHistory} from 'react-router-dom'
  import Alert from '@material-ui/lab/Alert';
  
  
  const [isError,setError] = React.useState({
      nameError : false,
      passError : false,
      isErrorAlert : false
  })
  const [openAlert,setAlert] = React.useState(false);
  //Destructuring
  const {name , password} = RegisterUser;
  //Functions
  
  const HandleCloseAlert = () =&gt;{
      setAlert(false)
  }
  
  const HandleOpenAlert = () =&gt; {
      setAlert(true)
  }
  
  
  const HandleRegister = () =&gt;{
      if((name === '' || name === null) &amp;&amp; (password === '' || password === null)){
          return setError({...isError ,nameError : true , passError : true})
      }
      else if((password === '' || password === null)){
          return setError({...isError,nameError : false , passError : true})
      }
      else if((name === '' || name === null)){
          return setError({...isError,nameError : true , passError : false})
      }
      // else if(!ValidUsername.test(name)){
      //     setError({nameError : true , passError : false , isErrorAlert : false})
      // }
          else{
              if(Users.length === 0){
                  const UserObject = {}
                  UserObject.name = name
                  UserObject.password = password
                  let newArray = [...Users , UserObject]
                  setUsers(newArray)
                  localStorage.setItem('users',JSON.stringify(newArray))
                  // setError({...isError , isErrorAlert : false})
                  HandleOpenAlert();
              }
              else{
                  let UserName_array = JSON.parse(localStorage.getItem('users')).map(user=&gt;user.name)
                  let found = UserName_array.includes(name)
                  if(found){
                      setError({...isError , isErrorAlert : true})
                      // HandleOpenAlert();
                      alert('taken')
                  }
                  else{
  
                      const UserObject = {}
                      UserObject.name = name
                      UserObject.password = password
                      let newArray = [...Users , UserObject]
                      setUsers(newArray)
                      localStorage.setItem('users',JSON.stringify(newArray))
                      setError({...isError , isErrorAlert : false})
                      HandleOpenAlert();
                  }
              }
      }
      
  
  }
  return ( 
      &lt;div&gt;
          &lt;div className={classes.MainWrapper}&gt;
              &lt;&gt;
              &lt;Snackbar
              anchorOrigin={{
              horizontal : 'center',
              vertical : 'top'
              }}
              open = {openAlert}
              autoHideDuration = {1000}
              onClose = {HandleCloseAlert}
              &gt;
              &lt;Alert severity='success' variant='filled' onClose = {HandleCloseAlert}&gt;'registed'&lt;/Alert&gt;  
              &lt;/Snackbar&gt;
              &lt;/&gt;
          
              &lt;Paper elevation = {3} className = {classes.Paper}&gt;
                  &lt;Typography variant = 'h5' style={{margin : '10px'}}&gt;Register&lt;/Typography&gt;
                  &lt;div className={classes.FormWrapper}&gt;
                      &lt;form&gt;
                          &lt;Grid container spacing={2} alignItems=&quot;flex-end&quot;&gt;
                              &lt;Grid item&gt;
                                  &lt;PersonIcon/&gt;
                              &lt;/Grid&gt;
                              &lt;Grid item&gt;
                              &lt;TextField
                              name = 'name'
                              type = 'text'
                              label=&quot;Username&quot; 
                              size = 'medium'
                              error = {isError.nameError? true : false }
                              helperText={isError.nameError? 'Please Enter username correctly': ''}
                              value = {RegisterUser.name}
                              onChange = {HandleChange}
                              
                              /&gt;
                              &lt;/Grid&gt;
                          &lt;/Grid&gt;
                          &lt;br /&gt;
                          &lt;Grid container spacing={2} alignItems=&quot;flex-end&quot;&gt;
                              &lt;Grid item&gt;
                                  &lt;VpnKeyIcon/&gt;
                              &lt;/Grid&gt;
                              &lt;Grid item&gt;
                              &lt;FormControl error = {isError.passError? true : false }&gt;
                                  &lt;InputLabel htmlFor=&quot;standard-adornment-password&quot;&gt;Password&lt;/InputLabel&gt;
                                  &lt;Input
                                  id=&quot;standard-adornment-password&quot;
                                  type={RegisterUser.showPassword? 'text' : 'password'}
                                  name = 'password'
                                  style={{width : '200px'}}
                                  value = {RegisterUser.password}
                                  onChange = {HandleChange}
                                  endAdornment={
                                  &lt;InputAdornment position=&quot;end&quot;&gt;
                                      &lt;IconButton
                                      aria-label=&quot;toggle password visibility&quot;
                                        onClick={HandleClickShowPassword}
                                      &gt;
                                          {RegisterUser.showPassword ? &lt;Visibility /&gt; : &lt;VisibilityOff /&gt;}
                                      &lt;/IconButton&gt;
                                  &lt;/InputAdornment&gt;
                                  }
                                  /&gt;
                                  &lt;FormHelperText id=&quot;component-helper-text&quot;&gt;{isError.passError?'Please enter password':''}&lt;/FormHelperText&gt;
                                  &lt;/FormControl&gt;
                              &lt;/Grid&gt;
                          &lt;/Grid&gt;
                          &lt;br /&gt;
                          &lt;Button variant='contained' color='secondary' onClick={HandleRegister} style={{marginTop : '10px', marginBottom : '10px'}}&gt;Register&lt;/Button&gt;
                          &lt;br /&gt;
                          &lt;Typography style = {{fontSize : '14px'}}&gt;Already Logged in? &lt;Link to = '/'&gt;SignIn&lt;/Link&gt;&lt;/Typography&gt;
  
                      &lt;/form&gt;
                  &lt;/div&gt;
              &lt;/Paper&gt;
          &lt;/div&gt;
          
      &lt;/div&gt; 
   );
  </code></pre>
  <p>}</p>
  <p>export default Register;</p>