mathjs parser.evaluate doesn't work on react js

Question

I'm using mathjs for my project on React , my goal is to create string math function 'f(X)' and each time I give a number of X and received the result of the function but It doesn't work, this is the code

import "./styles.css";
import maths from "mathjs";
export default function App() {
  const parser = maths.parser();
  return (
    <div className="App">
      <h1>{parser.evaluate("f(x)=12x")}</h1>
      <h2>{parser.evaluate("f(1)")}</h2>
    </div>
  );
}

and I received that message

TypeError
Cannot read properties of undefined (reading 'parser')
App
/src/App.js:4:23
  1 | import "./styles.css";
  2 | import maths from "mathjs";
  3 | export default function App() {
> 4 |   const parser = maths.parser();
    |                       ^
  5 |   return (
  6 |     <div className="App">
  7 |       <h1>{parser.evaluate("f(x)=12x")}</h1>

you can give me other idea or suggestion I'll be really glad

New Edit I tried also this

import "./styles.css";
import { evaluate } from "mathjs";
export default function App() {
  return (
    <div className="App">
      <h1>{evaluate("f(x) = (sin(x) + cos(x/2)) * 5")}</h1>
      <h2>{evaluate("f(1)")}</h2>
    </div>
  );
}

and I received that

Error
Undefined function f
▶ 6 stack frames were collapsed.
App
/src/App.js:7:20
   4 |   return (
   5 |     <div className="App">
   6 |       <h1>{evaluate("f(x) = (sin(x) + cos(x/2)) * 5")}</h1>
>  7 |       <h2>{evaluate("f(1)")}</h2>
     |                    ^
   8 |     </div>
   9 |   );
  10 | }