Accessing data from async function - React JS

I'm trying to query a data service and use the json response to create a table with React. I have the following async function that creates a list of the json response (this part works as intended):

export const service_query = async function(url){
  const resp = await fetch(url);
	const result = await resp.json();
  const features = result.features;
  const features_list = []
  for (let i = 0; i < features.length; i++){
    features_list.push(features[0].attributes)
  }
  return features_list;
}

I'm not too familiar with async functions and am having trouble accessing the data. I've checked similar questions on here and haven't gotten a clear answer. My research shows that I need to need to call the async function with an await but that can only be done inside another async function, which once again returns a promise when called without await. I'm stuck in this loop...

import './App.css';
import { service_query } from './Utils';
import Table from './Table';

function App() {
  const url = "
";
  const data_values = service_query(url)
  const headers = Object.keys(data_values[0])
  const content = Object.values(data_values)
  return (
    <div className="App">
      <header className="App-header">
        <h1>Test</h1>  
        <div className="container">
          <Table theadData={headers} tbodyData={content}/>
        </div>
      </header>
    </div> 
  );
}

export default App;

I've tried the following but this once again means I can't access the data and get the promise:

 const getData = async() => {
    const data_values = await service_query(url)
    return data_values
  }; 

I also tried the following, but can't access data_values outside the function and assigning the entire thing to a variable returns a promise again:

  service_query(url).then((data) => {
    const data_values = data
  });

You can make async calls within useEffect, and update the response with useState. Something like this:

const url = 'some url'
function App() {
  const [headers, setHeaders] = useState(null);
  const [content, setContent] = useState(null);

  useEffect(() => {
    service_query(url).then(response => {
       setHeaders(response[0]);
       setContent(response);
    })
  }, [])

  return (
    <div className="App">
      <header className="App-header">
        <h1>Test</h1>  
        <div className="container">
          {!!headers && !!content && (
            <Table theadData={headers} tbodyData={content}/>
          )}
        </div>
      </header>
    </div> 
  );
}