require of js libraries twice referring different exports effectively takes only the last one

[praburajan]

Importing a react library component in a shadow-cljs / re-frame app like below, with multiple imports to the same library with different imports fails because the last one overrides the previous imports. In the below code the ChakraProvider does not render

//JS version
import { Button } from "@chakra-ui/react";
import { ChakraProvider } from "@chakra-ui/react";
class App extends Component {
  render() {
    return (
      <ChakraProvider>
        <Button
                px="3"
                py="2"
                bg="green.200"
                rounded="md"
                _hover={{ bg: "green.300" }}>
            Click me
        </Button>
        <h1>Hello World</h1>
      </ChakraProvider>
    );
  }
}
//cljs version
(ns todo.views
  (:require
   [re-frame.core :as re-frame]
   [todo.events :as events]
   ["@chakra-ui/react" :refer (ChakraProvider)]
   ["@chakra-ui/react" :refer (Button)]
   [todo.subs :as subs]))
(defn button-panel []
  [:div {:id "button-panel"}
   [:> Button {:px 10 :py 5 :bg "green.200" :on-click
     #(re-frame/dispatch [::events/update-counter 1])} "+"]
   [:> Button {:px 10 :py 5 :bg "green.200" :on-click
     #(re-frame/dispatch [::events/update-counter -1])} "-"]])
(defn main-panel []
  (let [counter (re-frame/subscribe [::subs/counter])]
    [:> ChakraProvider
     [:div
     [:h1 @counter]
     (button-panel)]]))