Min width of content based on control width about react-tiny-popover HOT 2 CLOSED

import React from 'react';
import { components } from 'react-select';
import { compose, setDisplayName } from 'recompose';

import Popover from '@/components/Popover';

const isMenuChild = index => index === 2;
const SelectContainer = ({ children, ...rest }) => {
  const menu = children.filter((child, index) => isMenuChild(index));
  const restChildren = children.filter((child, index) => !isMenuChild(index));
  return (
    <Popover
      position={['bottom', 'top']}
      align={'left'}
      isOpen={rest.selectProps.menuIsOpen}
      onClickOutside={rest.selectProps.onBlur}
      content={({ position, targetRect }) => {
        const style = {};
        if (['top', 'bottom'].indexOf(position) > -1) {
          style.width = `${targetRect.width}px`;
        }

        return (
          <div style={style}>
            { menu }
          </div>
        );
      }}
    >
      <components.SelectContainer {...rest}>
        {restChildren}
      </components.SelectContainer>
    </Popover>
  );
};

export default compose(setDisplayName('SelectContainer'))(SelectContainer);