I have 2 components Files (parent) and NoteList (child)

There is a lst of fles for example i’ve taken 1 to 5 numbers in files variable it means it renders 5 cards and each card have toggle button

NOTE: I need to open the previously opened or expanded cards to be open as it is, it means i clicked 1st card and after that clicked on 2nd card so there is no auto collapse i don’t need to collapse auto previously opened card

In the component i am calling the API to fetch the notes according to the folder id which i’ve passed using useEffect

PROBLEM
When i click to toggle/open the 1st folder/card then all the notes data is fetched using the NoteList component but after that when i am clicking to the 2nd folder means 2nd card then 2 APIs called (1st folder API and 2nd folder API), same for if i opened or expanded the 10 folders and try to open the 11th card then 11 APIs are called. it is useless how can i fix this issue???

Files.js

const files = [1, 2, 3, 4, 5]; // example
const [openFolderDetails, setOpenFolderDetails] = useState([]);

const toggleBtn = (folder) => {
    if (openFolderDetails.includes(folder)) {
        setOpenFolderDetails(
            openFolderDetails.filter((tempFolder) => tempFolder !== folder)
        );
    } else {
        setOpenFolderDetails([...openFolderDetails, folder]);
    }
};

return (
    <>
        {files.map((el) => {
            return (
                <>
                    <div> Folder {el} </div>
                    <button onClick={() => toggleBtn(el)}>Open notes</button>

                    {
                        openFolderDetails?.includes(el) && (
                            <NotesList folder={el} {...props} />
                        ) //props passed according to the need
                    }
                </>
            );
        })}
    </>
);

Expected output:

call the single API for when i click to open the specific folder not call all the folders API againnnnn