My error in the browser is as follows,

showbtdropIn
D:/mern/projfrontend/src/core/PaymentB.js:38
  35 | 
  36 | const showbtdropIn = () => {
  37 |  return (
> 38 |      <div>
     | ^  39 |          {info.clientToken !== null && products.length > 0 ? (
  40 |              <div>
  41 |                  <DropIn
View compiled

Paymentb
D:/mern/projfrontend/src/core/PaymentB.js:106
  103 | 
  104 | return (
  105 |     <div>
> 106 |         <h3>Your bill is {getAmount()} $</h3>
      | ^  107 |        {showbtdropIn()}
  108 |     </div>
  109 | );
View compiled

▶ 18 stack frames were collapsed.
(anonymous function)
D:/mern/projfrontend/src/core/PaymentB.js:28
  25 | getmeToken(userId, token).then((info) => {
  26 |  // console.log("INFORMATION", info);
  27 |  if (info.error && info) {
> 28 |      setInfo({ ...info, error: info.error });
     | ^  29 |  } else {
  30 |      const clientToken = info.clientToken;
  31 |      setInfo({ clientToken });
View compiled

All the related code files are shared in this link click here for files

I am not getting where did I miss, the length is already defined, even the getAmount is good without any error in logic or working, I am not getting why is it displaying undefined properties, I am new to the MERN stack, Can anyone help me? And help me to understand this error, and the concept I am missing.

If you find the question good Give an +1 upvote so that it helps others.