I'm having a hard time trying to make react-select render a dropdown on a new windows. I figured there was some issues with styled components and I found this GitHub issue with a solution to my exact problem: https://github.com/styled-components/styled-components/issues/3274

But it's not working yet. Can someone help me understand how to render the react-select dropdown correctly on a new window?

Here's my code:

// app.tsx

import "./styles.css";

import React, { useState } from "react";

import SelectComponent from "./control";

export default function App() {
  const [show, setShow] = useState(false);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <a onClick={() => setShow(!show)}>Click me</a>
      {show && <SelectComponent show={show} />}
      <div style={{ marginTop: "50px" }}>Status: {show ? "True" : "False"}</div>
    </div>
  );
}

And the other file is:

// control.tsx

import React, { useState, useRef } from "react";
import Select from "react-select";
import styled, { StyleSheetManager } from "styled-components";
import Popout from "react-popout";

const options = [
  { value: "chocolate", label: "My Chocolates" },
  { value: "strawberry", label: "Strawberry" },
  { value: "vanilla", label: "Vanilla" }
];

const SelectComponent = ({ show }) => {
  const nwRef = useRef();

  return (
    <StyleSheetManager target={nwRef.current}>
      <div ref={nwRef}>
        <Popout isPopout={true}>
          <Select
            options={options}
            // menuPortalTarget={nwRef.current}
            styles={{ menuPortal: (base) => ({ ...base, zIndex: 9999 }) }}
          />
        </Popout>
      </div>
    </StyleSheetManager>
  );
};

export default SelectComponent;

Can someone point me in the right direction to render that dropdown correctly? I even tried react-select's menuPortalTarget but it isn't working. Any help would be appreciated.