React custom input with react-bootstrap

React-Custom-Input.js

import React, { useState } from "react";

export default function CustomInput(props) {
  const { error, inputProps, regex, className, onInput } = props;
  const [showError, setShowError] = useState(false);
  const [text, setText] = useState("");
  const handleChange = (val) => {
    setText(val);
    if (regex.test(val)) {
      setShowError(false);
    } else {
      setShowError(true);
    }
    onInput && onInput(val);
  };
  return (
    <div className={className}>
      <input
        value={text}
        className={showError ? "form-control border-danger" : "form-control"}
        {...inputProps}
        onChange={(e) => handleChange(e.target.value)}
      />
      {showError && error ? (
        <small className="text-danger">{error}</small>
      ) : null}
    </div>
  );
}

<CustomInput
  className="form-group col-md-3"
  inputProps={{ placeholder: "test", maxLength: "50" }}
  error="Required"
  regex={regexes.url}
  onInput={(val) => console.log(val)}
/>