Truffle – How to Resolve Error When Loading Contract ABI into React Application

Hello i am quite new in web3 development, I have compiled my smart contract on ganache using "truffle compile" and copy the generated JSON (DevToken.json) in the build folder and paste it inside react app /public folder

and i create a function to load the ABI

  async function getABI(){

    let ABI = "";
    await fetch('./DevToken.json', {
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      }
    }).then((response) => {

      if (response.status == 200) {

        return response.json();
      } else {
        throw new Error('Error fetching ABI');
      }
    }).then((data) => {

      ABI = data;
    }).catch((error) => {
      throw new Error(error);
    });

    return ABI;
  }

Unfortunately i got this error

Is there any other way to export the ABI and import it into the react app?