Как включить кнопку «Материал», когда текст других компонентов специфичен

Я изучаю ReactJs, а теперь и Material Ui, и у меня возникла небольшая проблема.

Вот компонент:

Я хочу включить button, только если TextField не "Новое имя тега" И Select не "Выбрать"

Внизу в коде, который вы видите:

disabled={!tagName || (tagName === 'New Tag Name' && ???? === 'Select')}

Но я не могу понять, как проверить:

<InputLabel id="category-select">Select</InputLabel>

"выбрать" слово, я, вероятно, что-то не понимаю, пожалуйста, совет??

Кнопка должна быть включена, когда пользователь набрал текст и выбрал из select

import React from 'react';
import { connect } from 'react-redux';
import Dots from 'react-activity/lib/Dots';
import 'react-activity/lib/Dots/Dots.css';
import { Button, FormControl, InputLabel, Select, TextField, MenuItem } from '@material-ui/core';
import { withStyles } from '@material-ui/core/styles';
import { compose } from 'recompose';
import { changeDisplayName } from '../../../../../redux/userData/user.actions';

const styles = theme => ({
    root: {
        backgroundColor: theme.palette.primary.light,
        // textAlign: 'center',
        padding: '10px',
        margin: 'auto',
        display: 'flex',
        justifyContent: 'space-around',
    },
    tagTextField: {
        textAlign: 'left',
        padding: '8px',
        margin: '5px',
        border: 'none',
        borderRadius: '2px',
        fontSize: '12pt',
        // background: 'blue',
    },
    input: {
        background: 'white',
        color: 'black',
    },
    changeNameButton: {
        backgroundColor: theme.palette.primary.main,
        boxShadow: theme.shadows[5],
        border: 'none',
        borderRadius: '2px',
        color: 'white',
        margin: '5px',
        padding: '8px',
        cursor: 'pointer',
        '&:hover': {
            cursor: 'pointer',
            backgroundColor: theme.palette.primary.dark,
        },
        '&:active': {
            cursor: 'pointer',
            backgroundColor: theme.palette.primary.dark,
        },
        '&:disabled': {
            cursor: 'default',
            color: 'gray',
            backgroundColor: theme.palette.primary.main,
        },
    },
});

class AddTag extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            tagName: 'New Tag Name',
            categoryName: '',
            categoryNames: ['aaaa', 'bbbb', 'cccc', 'dddd', 'fff'],
        };
    }

    submit = () => {
        // let todoListCopy = [...this.state.todoList];
        // todoListCopy.push({
        //  todoName: this.state.todoName,
        //  userName: this.state.userName,
        // });
        // this.setState({
        //  todoName: '',
        //  todoList: todoListCopy,
        // });
    };

    changeCategoryName = categoryName => {
        this.setState({
            categoryName,
        });
    };

    changeTagName = tagName => {
        this.setState({
            tagName,
        });
    };

    render() {
        const { classes } = this.props;
        const { tagName, categoryName, categoryNames } = this.state;

        return (
            <div className={classes.root}>
                <TextField
                    className={classes.tagTextField}
                    id="outlined-basic"
                    label="Tag Name"
                    placeholder="Tag Name"
                    variant="outlined"
                    value={tagName}
                    onChange={e => this.changeTagName(e.target.value)}
                    autoComplete="off"
                    InputProps={{
                        className: classes.input,
                    }}
                />
                <FormControl>
                    <InputLabel id="category-select">Select</InputLabel>
                    <Select
                        labelId="category-select"
                        id="demo-simple-select-helper"
                        value={categoryName}
                        onChange={e => this.changeCategoryName(e.target.value)}
                    >
                        {categoryNames &&
                            categoryNames.map((element, index) => {
                                return (
                                    <MenuItem value={element} key={index}>
                                        {element}
                                    </MenuItem>
                                );
                            })}
                    </Select>
                </FormControl>
                <Button
                    className={classes.changeNameButton}
                    onClick={() => this.submit()}
                    variant="contained"
                    color="primary"
                    disabled={!tagName || (tagName === 'New Tag Name' && categoryName === 'Select')}
                >
                    Save Tag
                </Button>
            </div>
        );
    }
}

const mapDispatchToProps = dispatch => ({
    changeUserDisplayName: displayName => dispatch(changeDisplayName(displayName)),
});

const mapStateToProps = state => {
    return {
        savingDisplayName: state.user.isSavingDisplayName,
        newDisplayName: state.user.displayName,
        changeDisplayNameErr: state.user.changeDisplayNameErrMsg,
    };
};
const enhance = compose(withStyles(styles), connect(mapStateToProps, mapDispatchToProps));
export default enhance(AddTag);