Need help figuring out how to get my API data to render inside of my Tabs – Reactjs

I am in school working on a project where I have and API I am pulling from and have tabs UI Pattern I have my API data fetching and working and my Tab page setup and also rendering dummy data through each tab when i click it. I just can’t figure out the next step on how to actually get the map method from my API to show up inside my the tabs as content…. down Below is my code for my app.js and my Tabs.js setup to make things easier here is a code Sandbox version Edit: https://codesandbox.io/s/stranger-things-project-c1znvo?file=/src/App.js

import Tabs from './Components/Tabs'
import React, { useState, useEffect } from 'react';
import './index'
import './App.css';




function App() {
    //API URL From Stranger things Quotes
      const URL = 'https://strangerthings-quotes.vercel.app/api/quotes/5';
      const [quotes, setQuotes] = useState([])
  
      //Fetching Data from API
    function getQuotes () {
      fetch(URL)
      
    .then(response => response.json())
    .then(data => setQuotes(data))
  }
  useEffect(getQuotes, []);
 console.log(quotes)
  
 //Getting data to populate on Page using .map 
 // Author would'nt pop up from array added my own little extra edit
 //rendering Tabs from Tab Component to main page(App.js)
 return(
  <main className="App">
  

    <h1 className='heading'>Stranger Things Quotes</h1>
  
  <div className='quotes'></div>
  {quotes.map((quotes, index) => (
    <li key={index}> {quotes.quote} Author: {quotes.author}</li>
  )
 )}
 <Tabs/>

  </main>

   );
}

export default App;




import { useState } from 'react';
import './Tabs.css'


//Creating Tabs for the UI and using state

function Tabs () {
 const [toggleState, setToggleState] = useState(1)

const toggleTab = (index) => {
    setToggleState(index);
}



    return(

<div className="container">
            
        <div className='nav-tabs'>

    <button className={toggleState === 1 ? "tabs active-tabs" : "tabs"}
        onClick={() => toggleTab(1)}>Tab 1</button>
   
    <button className={toggleState === 2 ? "tabs active-tabs" : "tabs"}
        onClick={() => toggleTab(2)}>Tab 2</button>
        
    <button className={toggleState === 3 ? "tabs active-tabs" : "tabs"}
        onClick={() => toggleTab(3)}>Tab 3</button>

    <button className={toggleState === 4 ? "tabs active-tabs" : "tabs"}
        onClick={() => toggleTab(4)}>Tab 4</button>
        </div>

    
        <div className="content-tabs">
            <div className={toggleState === 1 ? "content  active-content" : "content"} >
            <h2>Quotes set 1:</h2>
            <p> data array</p>
  
            </div>
            </div>

       
      <div  className={toggleState === 2 ? "content  active-content" : "content"}>
            <h2>Quotes set 2:</h2>
            <p>data array </p>
            </div>
            
        
        <div className={toggleState === 3 ? "content  active-content" : "content"}>
            <h2>Quotes set 3:</h2>
            <p>data array </p>
            </div>
            
        <div className={toggleState === 4 ? "content  active-content" : "content"} >
            <h2>Quotes set 4:</h2>
            <p>data array </p>
            </div>
        
        
        </div>
        
    );
}
export default Tabs;