Очистить все изменения дизайна, когда окно закрыто

Question

У меня есть диалоговое окно (div) с формой в нем и объектом, который содержит данные из полей, если пользователь забывает заполнить одно из полей, граница этого поля становится красной. Моя проблема в том, что если пользователь закрывает диалоговое окно и открывает его снова, красные границы все еще остаются, и объект хранит информацию до закрытия. Я не уверен, как / если мне нужно очистить локальное хранилище или есть лучшее решение, поэтому каждый раз, когда окно закрывается, структура данных и стили по умолчанию. Я использую Bootstrap для компонентов.

import React from 'react';

const variables = {
  varA: '', varB: '', varC: ''
};
let emptyFields = [];

const border = {
  borderColor: '#C70039',
};

const submitForm = () => {
  emptyFields = [];
  if (Object.values(variables).includes('')) {
    for (const [key, value] of Object.entries(variables)) {
      if (value === '') {
        emptyFields.push(key);
      }
    }
  }
  return emptyFields;
};

const Form = empty => (
  <div>
    <p className="text-primary">Please provide information in all of the fields.</p>
    <form>
      <div className="form-group mt-4" >
        <label htmlFor="formGroupExampleInput">Var A </label>
        <input type="text" className='form-control' id="varA" required onChange={(e) => { variables.varA = e.target.value; } } />
      </div>
      <div className="form-group">
        <label htmlFor="formGroupExampleInput">Var B </label>
        <input type="text" id="varB" className='form-control' style={empty.empty.includes('varB') ? border : null} onChange={(e) => { variables.varB = e.target.value; }}/>
      </div>
      <div className="form-group">
        <label htmlFor="formGroupExampleInput">Var C </label>
        <input type="text" className="form-control" id="varC" style={empty.empty.includes('varC') ? border : null} onChange={(e) => { variables.varC = e.target.value; }}/>
      </div>
    </form>
    <button className="btn btn-primary" onClick={submitForm}>Submit</button>
  </div>
);

const CompleteForm = () => <Form empty = {emptyFields} />;

export default CompleteForm;