How to remove a component after calling another one?

Question

JavaScript

I have a React component:

import React from "react";
import { useState, useEffect } from "react";
import { TailSpin } from "react-loader-spinner";
import { PokemonDetails } from "./PokemonDetails";

function Pokemon({ name, url }) {
  const [data, setData] = useState(null);
  const [open, isOpen] = useState(false);

  useEffect(() => {
    fetch(url)
      .then((r) => r.json())
      .then(setData);
  }, [url]);

  const handleMore = (e) => {
    isOpen(true);
  };

  const handleBack = (e) => {
    isOpen(false);
  };

  return (
    <div>
      {data ? (
        <div>
          <div className="card">
            <div className="animate__animated animate__bounceInUp">
              <div className="card-image">
                <img src={data.sprites.front_default} alt="pokemon_img" />
                <span className="card-title">{name}</span>
              </div>
              <div className="card-content">
                {data.abilities.map((n, index) => (
                  <p key={index}>{n.ability.name}</p>
                ))}
              </div>
            </div>
            <button onClick={handleMore}>More</button>
          </div>
          {open ? (
            <div className="card">
              <PokemonDetails height={data.height} weight={data.weight} />
              <button onClick={handleBack}>Back</button>
            </div>
          ) : (
            <div></div>
          )}
        </div>
      ) : (
        <div>
          <TailSpin type="Puff" color="purple" height={100} width={100} />
        </div>
      )}
    </div>
  );
}

export { Pokemon };

When you click on "More", additional information about the Pokémon appears.
The problem is that I need to display the PokemonDetails component instead of the entire content.

<div className="card">
            <div className="animate__animated animate__bounceInUp">
              <div className="card-image">
                <img src={data.sprites.front_default} alt="pokemon_img" />
                <span className="card-title">{name}</span>
              </div>
              <div className="card-content">
                {data.abilities.map((n, index) => (
                  <p key={index}>{n.ability.name}</p>
                ))}
              </div>
            </div>
            <button onClick={handleMore}>More</button>
          </div>

I don't think it's a good idea to overlay CSS styles. Maybe someone can suggest the best way to do it?