Reactjs-Popup: Cannot read properties of undefined (reading 'forwardRef')

Question

Im trying to use the following documentation : https://react-popup.elazizi.com/component-api/ but always show the following error :Cannot read properties of undefined (reading 'forwardRef'). I cannot figure out how to make this popup listen to the const Custombutton ,how do I make it listen to value?

Fairly simple component here:

import { React, useState } from "react";
import { ErrorMessage, useField } from "formik";
import { StyledTextInput, StyledLabel, StyledIcon, ErrorMsg } from "./Styles";

// Eye for password
import { FiEyeOff, FiEye } from "react-icons/fi";
import Popup from "reactjs-popup";

export const TextInput = ({ icon, ...props }) => {
  const [field, meta] = useField(props);
  const [showpass, setShowpass] = useState(false);
  //const [showPopup, setShowPopup] = useState(false);

  const CustomButton = React.forwardRef(({ open, ...props }, ref) => (
    <button className="button" ref={ref} {...props}>
      Trigger - {props.open ? "Opened" : "Closed"}
    </button>
  ))

  return (
    <div style={{ position: "relative" }}>
      <StyledLabel htmlFor={props.name}>{props.label}</StyledLabel>
      {props.type !== "password" && (
        <StyledTextInput
          invalid={meta.touched && meta.error}
          {...field}
          {...props}
        />
      )}
      {props.type === "password" && (
        <StyledTextInput
          invalid={meta.touched && meta.error}
          {...field}
          {...props}
          type={showpass ? "text" : "password"}
        />
      )}
      <StyledIcon>{icon}</StyledIcon>
      {props.type === "password" && (
        <StyledIcon onClick={() => setShowpass(!showpass)} right>
          {showpass && <FiEye />}
          {!showpass && <FiEyeOff />}
        </StyledIcon>
      )}
      {meta.touched && meta.error ? (
        <ErrorMsg>{meta.error}</ErrorMsg>
      ) : (
        <ErrorMsg style={{ visibility: "hidden" }}>.</ErrorMsg>
      )}
      
      <Popup
        trigger={(open) => <CustomButton open={open} />}
        position="right center"
        closeOnDocumentClick
      >
        <span> Popup content </span>
      </Popup>
      ;
    </div>
  );
};

Answer 1

You should try to modify the React import :

import React, { useState } from 'react';

See https://reactjs.org/docs/react-api.html