Javascript – Uncaught TypeError: Cannot read properties of undefined (reading 'map') at DropdownMenu (dropdown.jsx:8:15)

I am trying to add a dropdown menu to my web application that can load a language code and a language from a mongodb database.
Here is the error that I received:

Uncaught TypeError: Cannot read properties of undefined (reading 'map')
    at DropdownMenu (dropdown.jsx:8:15)
    at renderWithHooks (react-dom.development.js:16305:18)
    at mountIndeterminateComponent (react-dom.development.js:20074:13)
    at beginWork (react-dom.development.js:21587:16)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
    at invokeGuardedCallback (react-dom.development.js:4277:31)
    at beginWork$1 (react-dom.development.js:27451:7)
    at performUnitOfWork (react-dom.development.js:26557:12)
    at workLoopSync (react-dom.development.js:26466:5)

Here is my index.jsx from my chat folder:

import React from 'react';
import {
    useMultiChatLogic,
    MultiChatSocket,
    MultiChatWindow,
    ChatSettings,
} from 'react-chat-engine-advanced';
import Header from '@/components/customHeader';
import StandardMessageForm from '@/components/customMessageForms/StandardMessageForm';
import Ai from '@/components/customMessageForms/Ai';
import AiAssist from '@/components/customMessageForms/AiAssist';
import DropdownMenu from '@/components/Dropdown/dropdown';

function Chat({ user, secret }) {
    const chatProps = useMultiChatLogic(
        import.meta.env.VITE_PROJECT_ID,
        user,
        secret
    );
    return (
        <div style={{ flexBasis: '100%' }}>
            <MultiChatSocket {...chatProps} />
            <MultiChatWindow
                {...chatProps}
                style={{ height: '100vh' }}
                renderChatHeader={(chat) => <Header chat={chat} />}
                renderChatSettings={(props)=>{return (<div><ChatSettings creds={props.creds} chat={props.chat}/><div><DropdownMenu /></div></div>);}}
                renderMessageForm={(props) => {
                    if (chatProps.chat?.title.startsWith('AiChat_')) {
                        return <Ai props={props} activeChat={chatProps.chat} />;
                    }
                    if (chatProps.chat?.title.startsWith('AiAssist_')) {
                        return (
                            <AiAssist
                                props={props}
                                activeChat={chatProps.assist}
                            />
                        );
                    }
                    return (
                        <StandardMessageForm
                            props={props}
                            activeChat={chatProps.chat}
                        />
                    );
                }}
            />
        </div>
    );
}

export default Chat;

This is the line of code that is failing:
renderChatSettings={(props)=>{return (<div><ChatSettings creds={props.creds} chat={props.chat}/><div><DropdownMenu /></div></div>);}}

And here is my dropdown.jsx file:

import React from "react";

function DropdownMenu({ data }) {
  return (
    <div>
      <h1>Dropdown Menu</h1>
      <select>
        {data.map((item) => (
          <option key={item.value} value={item.value}>
            {item.name}
          </option>
        ))}
      </select>
    </div>
  );
}

export default DropdownMenu;

And here is the mongoDB connection/configuration in the server’s index.js file:

/* MONGODB CONFIGURATION */
mongoose.connect("mongodb://127.0.0.1:27017/", {
  dbName: 'Languages'
});
const db = mongoose.connection;
db.on('error', console.error.bind(console, 'connection error:'));
db.once('open', function () {
  console.log('MongoDB connected');
});

/* SCHEMA AND MODEL DEFINITION */
const dropdownSchema = new mongoose.Schema({
  language_code: String, 
  language: String,
});
const Dropdown = mongoose.model('Dropdown', dropdownSchema);

Any help would be appreciated. Thank you in advance.