"<CharacterCounter max={500} text={characterCounter} />"
That's just going to give you the character count of ... the number of characters in the character counter. Which isn't very useful.
Just replace it with "{characterCounter}" outright.
Additionally, the disabled check for the publish button should just be "disabled={disabled || disableSubmitButton}", as otherwise it'll still check and disable the button at >500 characters.