findDOMNode error on React material-ui select menu

Question

I am using the select component here the exact markup

        <FormControl
            variant="outlined"
            className={classes.formControl}
            error={errors.title ? true : false}
          >
            <InputLabel htmlFor="title">Who are you?</InputLabel>
            <Select
              labelId="titleLabel"
              id="title"
              value={state.title ? state.title : 'Example1'}
              onChange={handleChange}
              label="Who are you?"
            >
              <MenuItem value={`Example1`}>Example1</MenuItem>
              <MenuItem value={`Example2`}>Example2</MenuItem>
              <MenuItem value={`Example3`}>Example3</MenuItem>
              <MenuItem value={`other`}>other</MenuItem>
            </Select>
            {errors.title && <FormHelperText>{errors.title}</FormHelperText>}
          </FormControl>

Then I keep getting the following error and not sure how to fix this

index.js:1 Warning: 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. Learn more about using refs safely here: fb.me/react-strict-mode-find-node

Answer 1

The error is coming because Material UI using react-transition-group component is which trying to use findDOMNode method which is deprecated and they haven't fixed it yet.

But, this error is coming only in strict mode in React and you can consider it just as a warning since it's says that the method is going to be deprecated but if the functionality of component if fine, you have nothing to worry about as it work just fine with current version. You can track this issue here.

Will update the answer when I find the real solution to this. Hope it gives you some idea.

Related open issue