title: React/React Hooks: Unknown prop type error on input, can't figure out how to resolve
body: <p>I have a component that I've set up using react hooks and I've passed a unique prop type to an input to handle the styling changes when there's an error with the user input. Everything works as expected but now I'm getting an unknown props error in the console and I can't figure out how to resolve it. 
  The error </p>
  
  <pre><code>React does not recognize the `isError` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `iserror` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
  </code></pre>
  
  <p>The Component</p>
  
  <pre><code>import React from "react";
  import styled from "styled-components";
  import { Col, Row, Input, Checkbox } from "antd";
  
  function validateEmail(value) {
    const errors = {};
    if (value === "") {
      errors.email = "Email address is required";
    } else if (!/\S+@\S+\.\S+/.test(value)) {
      errors.email = "Email address is invalid";
    }
    return errors;
  }
  
  const CustomerDetails = ({ customer }) =&gt; {
    const { contact = {} } = customer || {};
    const [disableInput, setDisableInput] = React.useState(false);
    const [errors, setErrors] = React.useState({});
    const [inputValue, setInputValue] = React.useState(contact.email);
  
    function onBlur(e) {
      setErrors(validateEmail(e.target.value));
    }
  
    function clearInput() {
      setInputValue(" ");
    }
  
    function handleInputChange(event) {
      setInputValue(event.target.value);
    }
  
    function CheckboxClick() {
      if (!disableInput) {
        clearInput();
      }
      setDisableInput(prevValue =&gt; !prevValue);
      setErrors({})
    }
  
    return (
      &lt;Container&gt;
        &lt;Row&gt;
          &lt;Col span={8}&gt;
            &lt;StyledInput
              value={inputValue}
              onChange={handleInputChange}
              disabled={disableInput}
              onBlur={onBlur}
              isError={!!errors.email}
            /&gt;
            {errors.email &amp;&amp; &lt;ErrorDiv&gt;{errors.email}&lt;/ErrorDiv&gt;}
          &lt;/Col&gt;
          &lt;Col span={8}&gt;
            &lt;Checkbox value={disableInput} onChange={CheckboxClick} /&gt; EMAIL OPT
            OUT
          &lt;/Col&gt;
        &lt;/Row&gt;
      &lt;/Container&gt;
    );
  };
  
  const Container = styled.div`
    text-align: left;
  `;
  
  const StyledInput = styled(Input)`
    max-width: 100%;
    background: white;
  
    &amp;&amp;&amp; {
      border: 2px solid ${props =&gt; props.isError ? '#d11314' : 'black'};
      border-radius: 0px;
      height: 35px;
    }
  `;
  
  const ErrorDiv = styled.div`
    color: #d11314;
  `;
  
  export default CustomerDetails;
  </code></pre>