Does flip work for Dropdown Custom Components?

[karis404]

From the docs, I can see that flip is default set to true for DropDown.Menu, but doesn't seem to be working for my custom Dropdown. Instead, a scrollbar on the right appears and dropdown falls off the bottom of my screen.

Dropdown

<Dropdown>
	<Dropdown.Toggle as={DecorationToggle} slot={slot} decorationName={decorationName}>
	</Dropdown.Toggle>
	<Dropdown.Menu as={ArmorCustomMenu} rootCloseEvent="mousedown">
	{filteredDecorationsList.map((dat) => (
	  <Dropdown.Item eventKey={dat.name_en}
					 key={dat.name_en}
					 onClick={ (e) => selectDecoration(e, slotPos, type, dat) }>
		{dat.name_en}
	  </Dropdown.Item>
	))}
	</Dropdown.Menu>
</Dropdown>

Custom Menu

render() {
    const { style, className, 'aria-labelledby': labeledBy } = this.props;
    let filteredData = this.state.filteredData;

    return (
      <div style={style} className={className} aria-labelledby={labeledBy}>
        <FormControl
          autoFocus
          className="mx-3 my-2 w-auto"
          placeholder="Type to filter..."
          onChange={this.handleChange}
          value={this.state.filter}
        />
        <ul style={{overflowY: 'scroll', height: '200px'}} className="list-unstyled">
          {React.Children.toArray(filteredData).filter(dat =>
            dat.props.children,
          )}
        </ul>
      </div>
    );
  }

[taion]

You're not passing through all the props that Popper needs to handle the flip case. Pass through all the injected props to your custom <div>.