Conditional rendering for href attribute in React

I am confused about the below part of the code. For me, the first code is not working as expected when conditionally rendering the href attribute.

But If I conditionally render the whole anchor tag it is working.

Issue I am facing in the first code:

1. When url variable is present it is redirected to the url.

2. But when url variable is not there, it is not redirected to google link

First:

    <>
    <div>
    <a href={url? url : "https://google.com"}>Read More</a>
    </div>
    </>

Second:

    <>
    <div>
    { url ? <a href={url}>Read More</a> :  <a href="https://google.com">Read More</a>}
    </div>
</>

Can anyone please tell me what the actual problem is in the first code?