inputWithCounter.ts

export const InputWithCounter = ({ maxLength, control, placeholder, name, rules }: Props) => {
  const [counter, setCounter] = useState(0);
  const handleInputCounter = (e: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => {
    const value = e.target.value.length;
    setCounter(value);
  };

  return (
    <Controller
      render={() => (
        <Styled.InputWithCounter
          name={name}
          placeholder={placeholder}
          onChange={e => handleInputCounter(e)}
          maxLength={maxLength}
          defaultValue=""
          suffix={
            <Styled.WordCounter>
              {counter} / {maxLength}
            </Styled.WordCounter>
          }
        />
      )}
      control={control}
      type="text"
      name={name}
      rules={rules}
    />
  );
};