Essentially, the approach is to have each dropdown menu within its own encapsulated Dropdown composite component, complete with its own set of state and event handlers. A modified version of your demo has been created to illustrate this concept.

<div>
    <Dropdown
      className="d-inline-block"
      onMouseOver={this.onMouseEnter}
      onMouseLeave={this.onMouseLeave}
      isOpen={this.state.dropdownOpen1}
      toggle={this.toggle1}
    >
      <DropdownToggle caret>Dropdown1</DropdownToggle>
      <DropdownMenu>
        <DropdownItem header>Submenu 1</DropdownItem>
        <DropdownItem>Submenu 1.1</DropdownItem>
      </DropdownMenu>
      &nbsp;&nbsp;&nbsp;
    </Dropdown>
    <Dropdown
      className="d-inline-block"
      // onMouseOver={this.onMouseEnter}
      // onMouseLeave={this.onMouseLeave}
      isOpen={this.state.dropdownOpen2}
      toggle={this.toggle2}
    >

      <DropdownToggle caret>Dropdown2</DropdownToggle>
      <DropdownMenu>
        <DropdownItem header>Submenu 2</DropdownItem>
        <DropdownItem>Submenu 2.1</DropdownItem>
        <DropdownItem>Submenu 2.2</DropdownItem>
      </DropdownMenu>
      &nbsp;&nbsp;&nbsp;
      <br /><br />

    </Dropdown>
    <Dropdown
      className="d-inline-block"
      // onMouseOver={this.onMouseEnter}
      // onMouseLeave={this.onMouseLeave}
      isOpen={this.state.dropdownOpen3}
      toggle={this.toggle3}
    >

      <DropdownToggle caret>Dropdown3</DropdownToggle>
      <DropdownMenu>
        <DropdownItem header>Submenu 3</DropdownItem>
        <DropdownItem>Submenu 3.1</DropdownItem>
        <DropdownItem>Submenu 3.2</DropdownItem>
        <DropdownItem>Submenu 3.3</DropdownItem>
      </DropdownMenu>
    </Dropdown>
  </div>

https://stackblitz.com/edit/reactstrap-v6-2dnzex?file=Example.js

Here is the code snippet to display the submenu of a menu or dropdown. If you have any questions or need clarification, feel free to ask.

import React from 'react';
import { Box, jsx } from 'theme-ui';
import { Link } from 'gatsby';
import { H1 } from '../../components/ThemeHeader';
import { Image } from '../../components';

const CardWithCTALinks = (props) => {
  const { cardWithCTALinksImage, ctaLinks, heading, bgColor } = props;
  const [onCTAListHover, setOnCTAListHover] = React.useState({ status: '', indexAt: -1 });

  const updateCTAListHover = (newOnCTAListHover, idx) => {
    if (newOnCTAListHover !== onCTAListHover) setOnCTAListHover({ state: newOnCTAListHover, indexAt: idx });
  };
  const renderImageSection = (src, alt) => {
    return <Image src={src} alt={alt} />;
  };
  const renderSubLinks = (subLinks, idx) => {
    return (
      <Box>
        {idx === onCTAListHover.indexAt &&
          subLinks.map((link) => (
            <Link key={Math.random().toString(36).substring(7)} to="/">
              {link.text}
            </Link>
          ))}
      </Box>
    );
  };
  const renderLinksSection = (linksList, headingText) => {
    return (
      <Box>
        {headingText && <H1>{headingText}</H1>}
        {linksList && (
          <Box>
            {linksList.map((link, index) => (
              <h1 onMouseEnter={() => updateCTAListHover(true, index)} onMouseLeave={() => updateCTAListHover(false, index)}>
                {link.node?.title}
                {link.node?.navItems.length > 0 && <>{onCTAListHover && renderSubLinks(link.node?.navItems, index)}</>}
              </h1>
            ))}
          </Box>
        )}
      </Box>
    );
  };

  return (
    <Box style={{ backgroundColor: bgColor }}>
      {cardWithCTALinksImage && <Box>{renderImageSection(cardWithCTALinksImage?.asset._ref, 'alt')}</Box>}
      {ctaLinks && heading && <Box>{renderLinksSection(ctaLinks.edges, heading)}</Box>}
    </Box>
  );
};

export default CardWithCTALinks;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

 import React from "react";
import {
  Dropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem
} from "reactstrap";

export default class CustomDropdown extends React.Component {
  constructor(props) {
    super(props);

    this.toggleMenu = this.toggleMenu.bind(this);
    this.handleMouseEnter = this.handleMouseEnter.bind(this);
    this.handleMouseLeave = this.handleMouseLeave.bind(this);
    this.state = {
      menuOpen1: false,
      menuOpen2: false,
      menuOpen3: false
    };
  }

  toggleMenu(id) {
   this.setState({[id]:!this.state[`${id}`]})
  }

  handleMouseEnter(id) {
    this.setState({ [id]: true });
  }

  handleMouseLeave(id) {
    this.setState({ [id]: false });

  }

  render() {
    return (
      <div>
        <Dropdown
          className="d-inline-block"
          onMouseOver={()=>this.handleMouseEnter("menuOpen1")}
          onMouseLeave={()=>this.handleMouseLeave("menuOpen1")}
          isOpen={this.state.menuOpen1}
          toggle={()=>this.toggleMenu("menuOpen1")}
        >
          <DropdownToggle caret>Dropdown1</DropdownToggle>
          <DropdownMenu>
            <DropdownItem header>Submenu 1</DropdownItem>
            <DropdownItem>Submenu 1.1</DropdownItem>
          </DropdownMenu>
        </Dropdown>
        <Dropdown
          className="d-inline-block"
           onMouseOver={()=>this.handleMouseEnter("menuOpen2")}
          onMouseLeave={()=>this.handleMouseLeave("menuOpen2")}
          isOpen={this.state.menuOpen2}
          toggle={()=>this.toggleMenu("menuOpen2")}
        >
          &nbsp;&nbsp;&nbsp;
          <DropdownToggle caret>Dropdown2</DropdownToggle>
          <DropdownMenu>
            <DropdownItem header>Submenu 2</DropdownItem>
            <DropdownItem>Submenu 2.1</DropdownItem>
            <DropdownItem>Submenu 2.2</DropdownItem>
          </DropdownMenu>
        </Dropdown>
        <Dropdown
          className="d-inline-block"
        onMouseOver={()=>this.handleMouseEnter("menuOpen3")}
          onMouseLeave={()=>this.handleMouseLeave("menuOpen3")}
          isOpen={this.state.menuOpen3}
          toggle={()=>this.toggleMenu("menuOpen3")}
        >
          &nbsp;&nbsp;&nbsp;
          <br />
          <br />
          <DropdownToggle caret>Dropdown3</DropdownToggle>
          <DropdownMenu>
            <DropdownItem header>Submenu 3</DropdownItem>
            <DropdownItem>Submenu 3.1</DropdownItem>
            <DropdownItem>Submenu 3.2</DropdownItem>
            <DropdownItem>Submenu 3.3</DropdownItem>
          </DropdownMenu>
        </Dropdown> 
      </div>
    );
  }
}

Give it a try! Remember to provide different arguments for each dropdown so the method can distinguish between which one to open or close.

Hello @TestUser and Drew Reese, I've optimized some code by implementing arrow functions. Check it out here: https://stackblitz.com/edit/reactstrap-dropdown?file=Example.js. If you require multiple dropdowns, you can create a single dropdown component and use props to generate multiple instances. Utilizing map for iteration, you can easily incorporate this functionality in various parts of your app. This showcases the flexibility and beauty of React.

Essentially, you were using the same state variable for all three dropdowns.

To resolve this issue, you should maintain three distinct state variables. To achieve this dynamically, you can follow the steps outlined below.

For a more reusable approach, consider creating the Dropdown as a separate component.

If needed, additional logic can be added. This is a straightforward way to address the problem.

App.js

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import { Container } from "reactstrap";
import CustomDropDown from "./CustomDropdown";
import "bootstrap/dist/css/bootstrap.min.css";

import "./styles.css";

const dropdownConfig = [
  {
    customKey: 1,
    options: [
      { title: "Submenu 1", header: true },
      { title: "Submenu 1.1", header: false }
    ],
    name: "dropdownOpen1"
  },
  {
    customKey: 2,
    options: [
      { title: "Submenu 2", header: true },
      { title: "Submenu 2.1", header: false }
    ],
    name: "dropdownOpen2"
  },
  {
    customKey: 3,
    options: [
      { title: "Submenu 3", header: true },
      { title: "Submenu 3.1", header: false }
    ],
    name: "dropdownOpen3"
  }
];

function App() {
  const [keysForDropdown, setKeysForDropdown] = useState({});

  useEffect(() => {
    const keys = dropdownConfig.map(dropdown => dropdown.name);
    const object = keys.reduce((acc, curr) => {
      acc[curr] = false;
      return acc;
    }, {});
    setKeysForDropdown({ ...object });
  }, []);

  const _handleToggle = e => {
    setKeysForDropdown({
      ...keysForDropdown,
      [e.target.name]: !keysForDropdown[e.target.name]
    });
  };

  const _handleMouseEnter = e => {
    setKeysForDropdown({
      ...keysForDropdown,
      [e.target.name]: !keysForDropdown[e.target.name]
    });
  };

  const _handleMouseLeave = e => {
    setKeysForDropdown({
      ...keysForDropdown,
      [e.target.name]: !keysForDropdown[e.target.name]
    });
  };

  return (
    <div className="App">
      <Container>
        {keysForDropdown &&
          dropdownConfig.map(dropdown => (
            <CustomDropDown
              {...dropdown}
              key={dropdown.customKey}
              stateKeys={keysForDropdown}
              handleToggle={_handleToggle}
              handleMouseEnter={_handleMouseEnter}
              handleMouseLeave={_handleMouseLeave}
            />
          ))}
      </Container>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

CustomDropdown.js

import React from "react";
import {
  Dropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem
} from "reactstrap";

const CustomDropDown = props => {
  const {
    handleMouseEnter,
    handleMouseLeave,
    handleToggle,
    options,
    name,
    stateKeys
  } = props;
  return (
    <div className="dropdown-container">
      <Dropdown
        className="d-inline-block"
        onMouseOver={handleMouseEnter}
        onMouseLeave={handleMouseLeave}
        isOpen={stateKeys[name]}
        toggle={handleToggle}
      >
        <DropdownToggle name={name} caret>
          Dropdown1
        </DropdownToggle>
        <DropdownMenu>
          {options.length &&
            options.map(({ header, title }) => (
              <DropdownItem header={header}>{title}</DropdownItem>
            ))}
        </DropdownMenu>
      </Dropdown>
    </div>
  );
};

export default CustomDropDown;

Working codesandbox