Font not loading using FontLoader THREE.js

I am using THREE.js with React.

Im trying to load custom font using fondLoader but getting the Uncaught syntax error

Here's the code i'm using

import React, { Component } from 'react';
import './About.css';
import * as THREE from 'three';
import { FontLoader } from 'three/examples/jsm/loaders/FontLoader.js';
import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry.js';

class About extends Component{

    componentDidMount() {
        const height = 700;
        const width = 700;
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(22, width/height, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer({alpha: true});
        renderer.setSize(width, height);
        this.mount.appendChild( renderer.domElement );
        camera.position.z = 10;

        const loader = new FontLoader();

        loader.load(
            '../../../dist/myFont.json',
            (droidFont) => {
                // console.log(droidFont)
                const geometry = new TextGeometry('HTML', {
                    font: droidFont,
                    size: 10,
                    height: 5,
                });
            
                const textMest = new THREE.Mesh(geometry, new THREE.MeshNormalMaterial());
                textMest.position.y += 15;
                textMest.position.z -= 40;
                textMest.position.x = -8;
                scene.add(textMest);
            });
    }
  render() {
  return (
    <div className = 'about-container' id = 'about-container'>
        <div className = 'about-container-left'>
            <div className = 'about-container-left-holder'>
                <h1>Myself</h1>
                <p>I'm Nayan Thulkar, full-stack developer located in chandrapur, Maharashtra. I'm passionate about developing software. Also, I do competitive programing.</p>
            </div>
        </div>
        <div className = 'about-container-right'>
            <div className = 'about-container-right-holder' ref={ref=>(this.mount=ref)} >
            </div>
        </div>
    </div>
  )
  }
}
export default About;

Error logs

FontLoader.js:33 THREE.FontLoader: typeface.js support is being deprecated. Use typeface.json instead.
(anonymous) @ FontLoader.js:33
localhost/:1 Uncaught (in promise) SyntaxError: Unexpected string in JSON at position 1
    at JSON.parse (<anonymous>)
    at Object.onLoad (FontLoader.js:34:1)
    at three.module.js:39334:1

Directory structure

  --- portfolio
          |
           --- dist
                 |
                  ---myFont.json
          |
           --- node_modules
          |
           --- public
          |
           --- src
                |
                 --- Mainbody
                         |
                          --- About
                                 |
                                  --- About.js

I have also tried putting myFont.json file in public folder but didn't worked.

I tried to follow up on https://discourse.threejs.org/t/unable-to-use-fontloader-or-textgeometry/35803 but couldn't implement it.

Can someone points the exact reason why font is not loading and what should be done.

Thanks in advance.