TypeError when trying to display fetched data from API in React

Question

I try to fetch data from an API and display it on DOM and I'm using the fetched data as a prop to display but, when I try passing {input.bitcoin} as a prop React displays $[object Object] so I tried {input.bitcoin.usd} which ends up returning Uncaught TypeError: Cannot read properties of undefined (reading 'usd')

Here's my code:

• CoinListView component includes a li tag and there's just {coinPrice} prop inside and nothing else.

import React from "react";
import { useState, useEffect } from "react";
import CoinListView from "./CoinListView";

const Main = () => {
const [input, setInput] = useState({});

  const options = {
    method: "GET",
    headers: {
      "X-RapidAPI-Host": "coingecko.p.rapidapi.com",
      "X-RapidAPI-Key": "API-KEY",
    },
  };

  const fetchData = async () => {
    try {
      const response = await fetch(
        "https://coingecko.p.rapidapi.com/simple/price?ids=bitcoin,ethereum,litecoin,tether&vs_currencies=usd",
        options
      );
      const data = await response.json();
      const newData = data;

      console.log(newData);

      return setInput(newData);
    } catch (err) {
      return console.error(err);
    }
  };

  useEffect(() => {
    fetchData();
  }, []);
  
  return (
  <div>
    <div>
      <div className="prices">
          <CoinListView coinPrice={input.bitcoin} />
      </div>
    </div>
  </div>   

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>