I am trying to create a Accordion using react bootstrap

I am trying to create a Accordion using react bootstrap

import Accordion from "react-bootstrap/Accordion";
import Card from "react-bootstrap/Card";

export default function counter() {
 
  return (
    <>
      <h2>Records</h2>

      <Accordion defaultActiveKey="0">
        <Card>
          <Accordion.Toggle as={Card.Header} eventKey="0">
            <span>june 7</span> <span>14:36</span> <span>14:36</span>
            <span>4</span>
          </Accordion.Toggle>
          <Accordion.Collapse eventKey="0">
            <Card.Body>Hello! I'm the body</Card.Body>
          </Accordion.Collapse>
        </Card>
        {/* <Card>
          <Accordion.Toggle as={Card.Header} eventKey="1">
            Click me!
          </Accordion.Toggle>
          <Accordion.Collapse eventKey="1">
            <Card.Body>Hello! I'm another body</Card.Body>
          </Accordion.Collapse>
        </Card> */}
      </Accordion>
    </>
  );
}

When I import "bootstrap/dist/css/bootstrap.min.css"; it works but my design in all component get effected, I just wanted Accordion style here.