External link in react is being appended with localhost if no http or https present

This is not related to react at all, this is based on how the browsers understands urls. There are 4 types of urls:

http://yourdomain.com/images/example.png: ( this works fine for you, because it is an absolute url, and the browser will open it as it is)

//yourdomain.com/images/example.png (this is also like the previous one, and will work fine for you, except the scheema here is relative to the current host, if your website is https it will open https otherwise it will open http)

You are having issues with the following two urls, and thats because these work relative to the current host, in your case it seems your website is on http://localhost:3000

/images/example.png (relative to the document root)

images/example.png (relative to the path)

now if you want to convert relative urls to be relative to another host, use the URL constructor like this

const baseOfAnotherHost = 'https://someotherdomain.com'
// can also work with relative urls like 'doc/sign/' or '/doc/sign'
const relativeOrAbsoluteURL = 'https://www.someotherdomain.com/doc'
const absoulteUrl = new URL(relativeOrAbsoluteURL,baseOfAnotherHost).href
<a href={absoulteUrl} target={'_blank'} rel="noopener noreferrer external">
    {absoulteUrl}</a>

add this condition if url is empty it will not redirect

{url && <a href={url} target={'_blank'} rel="noopener noreferrer external">
    {url}</a>}