1. Create a new file named XudtLogoLoader.jsx, then paste the following code into that file:

import React, { useEffect, useState } from "react";

const XudtLogoLoader = ({ symbol, sizeStyle }) => {
  const [loadFailed, setLoadFailed] = useState(false);

  const handleLoadError = () => {
    setLoadFailed(true);
  };

  useEffect(() => {}, [symbol]);

  return (
    <div>
      {loadFailed ? (
        // Display the first letter of the symbol when loading fails
        <div className={`${sizeStyle || "h-40 w-40 text-[96px]"} rounded-full bg-[#378ACA] text-black font-bold flex items-center place-content-center`}>
          {symbol.charAt(0).toUpperCase()}
        </div>
      ) : (
        // Display the logo image when the logo is loaded successfully.
        <img
          className={`${sizeStyle || "h-40 w-40"}`}
          src={`https://xudtlogos.cc/logos/${symbol}-logo.png`}
          alt={`xudt-${symbol}-logo`}
          onError={handleLoadError}
        />
      )}
    </div>
  );
};

export default XudtLogoLoader;

2. Use XudtLogoLoader:

    <XudtLogoLoader symbol={xudtInfo.symbol} sizeStyle={'w-24 h-24 text-5xl'}></XudtLogoLoader>

We assume that the data object containing the xUDT symbol field is called xudtInfo.

The CSS styles in the above code are provided as an example using tailwindcss. You can adjust them according to your own application.