Using React Context returns Cannot read properties of undefined (reading ‘_context’)

I am trying to pass a value that is selected on click via Context to another component, however, I am receiving Cannot read properties of undefined (reading ‘_context’) error. After reading more on this error it seems that it is usually due to an improper export, but mine seems fine. How can I resolve this error and pass the value? Here is my code:
main.jsx:

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import DifferentComponent from './DifferentComponent.jsx';
export const DropDownButtonContext = React.createContext();

const items = [
  {
    actionName: 'Undo',
    icon: 'undo',
  },
  {
    actionName: 'Redo',
    icon: 'redo',
    disabled: true,
  },
  {
    actionName: 'Cut',
    icon: 'cut',
  },
  {
    actionName: 'Copy',
    icon: 'copy',
  },
  {
    actionName: 'Paste',
    icon: 'paste',
  },
];

const App = () => {
  const [menuItem, setMenuItem] = React.useState('');

  return (
    <div>
      <DropDownButtonContext.Provider value={menuItem}>
        <DropDownButton
          textField="actionName"
          items={items}
          text="Edit"
          onItemClick={(e) => {
            setMenuItem(e.item.actionName);
            console.log(menuItem);
          }}
        />
        <DifferentComponent />
      </DropDownButtonContext.Provider>
    </div>
  );
};
ReactDOM.render(<App />, document.querySelector('my-app'));

DifferentComponent.jsx:

import * as React from 'react';
import { DropDownButtonContext } from './main';

const value = React.useContext(DropDownButtonContext);

const DifferentComponent = () => {
  return (
    <div>
      <h1> {value}</h1>
    </div>
  );
};

export default DifferentComponent;