button onClick works only once in react component - reactjs

Question

I am fetching data from API and Im displaying the users name in a parent component UserList and when I click on one name, it displays the child component called UserDetails. component).
The UserDetail comp contains a button that on click hides that component so the user can go and click on another user's name and see their details. It works fine the first time I choose a user and close the window. But when I click again on a second user nothing happens. I need to refresh the page so it works fine again.
I don't understand where the issue is. I suspect something to do with the ternary operator around the UserDetails component? Or something with the state? is it ok I write false instead of null?
The parent component:
const UserList = () => {
const [users, setUsers] = useState([])
const [selectedUser, setSelectedUser] = useState()
const [showUser, setShowUser] = useState(true)
const onHandleClick = () => setShowUser(false)
useEffect(() => {
fetch(URL)
.then(res => res.json())
.then(json => setUsers(json));
}, [])
return (
<>
<header>
<h1>Users list</h1>
</header>
<section>
<ul>
{users.map(user => (
<li key={user.id}>
<button onClick ={() => setSelectedUser(user)}>{user.name}</button></li>
))}
</ul>
{selectedUser && (
<>
{showUser ?
<UserDetail
name={selectedUser.name}
username={selectedUser.username}
email={selectedUser.email}
address={selectedUser.address.street}
phone={selectedUser.phone}
company={selectedUser.company.name}
onClick={onHandleClick}
/>
: false}
</>
)}
</section>
</>
)
}
export default UserList
The child component:
const UserDetail = ({name, username, email, address, phone, website, company, onClick}) => {
return (
<>
<DetailWindow>
<h1>{name}</h1>
<p>{username}</p>
<p>{email}</p>
<p>Adress:{address}</p>
<p>{phone}</p>
<p>{website}</p>
<p>{company}</p>
<button onClick={onClick}>X</button>
</DetailWindow>
</>
)}
const DetailWindow = styled.div`
border: black solid 1px;
`
export default UserDetail

Answer 1

After you set showUser to false, you never set it back to true again. I would suggest your onClick when you're mapping over users to both select the user and show the user -
onClick={() => {setSelectedUser(user); setShowUser(true);} }
It would probably make sense to declare this function outside of your return since it will be multi-line.