Change the color of a button based on Formik/Yup Validation

There is a field where the user must introduce a text. If the text is the desired one, a button should change its color so the user knows the text is the correct one.

So far I've done the validation of the text, an error message is shown if the text is not the desired one but I don't know how to connect this to the button's styling.

Here is my code:

import React from 'react';
import { Redirect } from 'react-router-dom';
import { connect } from 'react-redux';
import * as Yup from 'yup';
import { Formik, Form, Field } from 'formik';
import { Button, Modal, Input } from 'semantic-ui-react';
import { Creators } from '../../../actions';
import './FridgeForm.scss';

class CreateFridgeForm extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      open: false,
      redirectCreate: false,
    };
  }

  componentDidMount() {
    const { edit, getFridge, fridge, getFridges } = this.props;
    if (edit) {
      getFridge(fridge._id);
      getFridges();
    }
  }

  onOpen = () => {
    this.setState({ open: true });
  };

  closeModal = () => {
    this.setState({ open: false });
  };

  handleDelete = values => {
    const { deleteFridge, fridge, getFridges } = this.props;

    deleteFridge(fridge._id);

    this.setState({ open: false });
    this.setState({ redirectCreate: true });
    getFridges();
  };

  render() {
    const { trigger } = this.props;
    const title = 'Do you want to delete a fridge?';

    const { open, redirectCreate } = this.state;
    if (redirectCreate) {
      return <Redirect to="/fridges" />;
    }

    const initialValues = {
      deleteText: '',
    };
    const wrongTextMessage =
      'You must write DELETE in order to delete the fridge';
    const requiredErrorMessage = 'This field is required';
    const deleteTextValidation = /DELETE\b/g;
    const validationSchema = Yup.object({
      deleteText: Yup.string()
        .matches(deleteTextValidation, wrongTextMessage)
        .required(requiredErrorMessage),
    });
    return (
      <Modal
        open={open}
        trigger={trigger}
        onOpen={this.onOpen}
        onClose={this.closeModal}
        size="small">
        <Modal.Header >{title}</Modal.Header>
        <Modal.Content >
          <Modal.Description >
            Are you sure you want to delete?
          </Modal.Description>
          <Formik
            initialValues={initialValues}
            validationSchema={validationSchema}
            onSubmit={values => this.handleDelete(values)}>
            {({ values, errors, touched, setFieldValue }) => (
              <Form>
                <Field
                  className="add-fridge-input"
                  name="deleteText"
                  as={Input}
                  placeholder="Write DELETE"
                />
                <div className="add-fridge-error">
                  {touched.deleteText && errors.deleteText
                    ? errors.deleteText
                    : null}
                </div>
               
                  <Button className="delete-modal-button" type="submit"> // here is the button
                    Confirm
                  </Button>
           
              </Form>
            )}
          </Formik>
        </Modal.Content>
      </Modal>
    );
  }
}

const mapStateToProps = state => ({
  fridges: state.fridges.fridges,
  fridge: state.fridges.selectedFridge,
});

const mapDispatchToProps = {
  getFridges: Creators.getFridgesRequest,
  getFridge: Creators.getFridgeRequest,
  deleteFridge: Creators.deleteFridgeRequest,
};

export default connect(mapStateToProps, mapDispatchToProps)(CreateFridgeForm);

Is there a way to notify the button if validationSchema validates as correct the text?