Added state for focus on input, once it is focused, i want $ sign to disappear, I used onFocus and onBlur events to set the states to render the suffix of accounting Box conditionally, it is only working for the very first time when page renders, after that its not working

import React, { useState } from "react";
import CurrencyInput from "react-currency-input-field";
import "./index.scss";

const AccountingBox = ({
  conversion,
  characterLimit,
  characterDecimalLimit,
}) => {


  const [isFocused, setIsFocused] = useState(false);
  return (
    <React.Fragment>
      <CurrencyInput
        className="form-control col-lg-4"
        id="input-example"
        name="input-name"
        placeholder="Please enter a value"
        defaultValue={5}
        decimalsLimit={characterDecimalLimit}
        groupSeparator={conversion && "."}
        decimalSeparator={conversion && ","}
        maxLength={characterLimit}
        suffix={isFocused === false ? "$" : null}
        onFocus={() => setIsFocused(true)}
        onBlur={() => setIsFocused(false)}
      />
    </React.Fragment>
  );
};

export default AccountingBox;