TypeError: Cannot read properties of undefined (reading 'item')

Question

This is the error I keep getting when I am trying to run the code given below.

import React from 'react'
import { Accordion} from 'react-bootstrap/Accordion';
import { ToastContainer } from 'react-toastify';
const myaccordion = () => {
  return (
    <>
    <Accordion defulatActivateKey="0" className='mt-5 p-3'>
        <Accordion.item eventKey="0" className="item" >
            <Accordion.header>Accordion Header #1</Accordion.header>
            <Accordion.body>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
            </Accordion.body>
        </Accordion.item>
        <Accordion.item eventKey="2" className="item">
            <Accordion.header>Accordion Header #1</Accordion.header>
            <Accordion.body>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
            </Accordion.body>
        </Accordion.item>
        <Accordion.item eventKey="3" className="item">
            <Accordion.header>Accordion Header #1</Accordion.header>
            <Accordion.body>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
            </Accordion.body>
        </Accordion.item>
    </Accordion>
    <ToastContainer />
    </>
  )
}

export default myaccordion

Can someone tell me an alternative to how to use accordion-bootstrap.

Answer 1

Correct ✅:

import Accordion from 'react-bootstrap/Accordion';

Wrong ❌:

import { Accordion } from 'react-bootstrap/Accordion';