Load a react component on button onClick

I have the following code for a button in my ReactApp to open a new window with specific size:

<button
   type="button"
   style={{ height: '20px', width: '50px' }}
   className="btn btn-primary"
   onClick={() => {
   window.open(
   "",
   "Popup",
   "width=975, height=92, top=30"
       );
     }}
 />

I want to load another component when user clicks on the button. How can I achieve that? I have tried to load the component and then use it like the following, but didn’t work:

import component from "./component"

    <button
       type="button"
       style={{ height: '20px', width: '50px' }}
       className="btn btn-primary"
       onClick={() => {
       window.open(
       "{<component />}",
       "Popup",
       "width=975, height=92, top=30"
           );
         }}
     />

What would be the best way to do this?