Cannot read properties of undefined (reading 'FROMSYMBOL')

Почему данные с обьекта не выводятся, хотя обьект в localstorage хранится правильно

export const ShowCoinInfo = () => {
    const storedData = localStorage.getItem('coinObject');
    const data = JSON.parse(storedData);
    return (
        <div>
          <h2>{data.DISPLAY.USD.FROMSYMBOL}</h2>
          <p>Current Price: {data.DISPLAY.USD.PRICE}</p>
          <p>24h High: {data.DISPLAY.USD.HIGH24HOUR}</p>
          <p>24h Low: {data.DISPLAY.USD.LOW24HOUR}</p>
        </div>
      );
  }

ошибка:

Cannot read properties of undefined (reading 'FROMSYMBOL')
TypeError: Cannot read properties of undefined (reading 'FROMSYMBOL')
    at ShowCoinInfo (http://localhost:3000/main.45831c4f78058dac762e.hot-update.js:87:34)
    at renderWithHooks (http://localhost:3000/static/js/bundle.js:26385:22)
    at mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:29671:17)
    at beginWork (http://localhost:3000/static/js/bundle.js:30967:20)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:15977:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:16021:20)
    at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:16078:35)
    at beginWork$1 (http://localhost:3000/static/js/bundle.js:35952:11)
    at performUnitOfWork (http://localhost:3000/static/js/bundle.js:35199:16)
    at workLoopSync (http://localhost:3000/static/js/bundle.js:35122:9)