MathJax Expressions Dilemma

Can someone tell me the difference in the format between the two expressions I have mentioned below, the first one is rendered correctly where as second one is not:

When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are $$x = {"{"} -b \pm \sqrt{"{"} b^2-4ac {"}"} \over 2a {"}"}.$$

and

A force \(\overrightarrow{F} = (5\hat{i} + 3\hat{j} + 2\hat{k})N\) is applied over a particle which displaces it from its origin to the point \(\overrightarrow{R} = (2\hat{i} - \hat{j})m\). The work done on the particle in joules is:

The Script I am using for MathJax:

<script type="text/x-mathjax-config">
        MathJax.Hub.Config({
        tex2jax: {
        inlineMath: [["$","$"],["\\(","\\)"]],
        displayMath:[["$$", "$$"], ["\\[","\\]"]]
        },
        showMathMenu: false,
        messageStyle: "none"
        });
      </script>
      <script
        type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"
      ></script>

Solution

`As it was a react app, so the curly brackets {} get ignored in react, we need to wrap them in another curly bracket with template literals to avoid the errors.

Solved it by:

A force \(\overrightarrow{`{F}`} = (5\hat{`{i}`} + 3\hat{`{j}`} + 2\hat{`{k}`})N\) is applied over a particle which displaces it from its origin to the point \(\overrightarrow{`{R}`} = (2\hat{`{i}`} - \hat{`{j}`})m\). The work done on the particle in joules is: