I have a simple site which loads property-related data from a Danish national data provider, SDCI.
I am having issues passing down the right values from a mother component to a sub component.

My code looks like this:

My main component:

Search.js:

import { Container } from "react-bootstrap";
import { useState } from "react"; 
import { AsyncTypeahead } from "react-bootstrap-typeahead";
import ResultsDisplay from './ResultsDisplay';
const SEARCH_URI = "https://api.dataforsyningen.dk/autocomplete";

const AsyncSearch = () => {
    const [isLoading, setIsLoading] = useState(false);
    const [options, setOptions] = useState([]);
    const [found, setFound] = useState(false);
    const [hest, setHest] = useState([])
    const [grund, setGrund] = useState(0)

    const handleSearch = async (query) => {
        setIsLoading(true);    
        const response = await fetch(`${SEARCH_URI}?q=${query}&type=adresse`);
        const addresses = await response.json();

        setOptions(addresses);
        console.log(addresses);
        setIsLoading(false);
    };

    const handleChange = async (selected) => { 
      if (selected === undefined || selected.length == 0 )
      return;
    
      const s = selected[0] 
      const aga = s.data.adgangsadresseid;
      // console.log(`1. id = ${s.data.id}`)
      // console.log(`2. id = ${s.data.adgangsadresseid}`)
      // console.log(`id is ${selected[0].data.adgangsadresseid}`);

      let res;
      if (s.data.adgangsadresseid === undefined)
      {
        res = await fetch(`/bolig/${selected[0].data.id}`);  
      } else { 
        res = await fetch(`/bolig/${selected[0].data.adgangsadresseid}`);
      } 
      let searchResults = await res.json();
      setHest(searchResults);
      console.log(hest); 
      setFound(true);
     
      // Fetch boliggrundareal  
      const jordstykkeId = searchResults[0].jordstykke;
      const matRes = await fetch(`/grundareal/${jordstykkeId}`);
      const grund = await matRes.json();
      setGrund(grund.grundareal);
    }
  // Bypass client- side filtering by returning `true`. Results are already
  // filtered by the search endpoint, so no to do>it again.
  const filterBy = () => true; 

  return (
    <>      
      <AsyncTypeahead
        filterBy={filterBy}
        id="async-load"
        isLoading={isLoading}
        labelKey="forslagstekst"
        onChange={handleChange}
        minLength={3}
        onSearch={handleSearch}
        options={options}
        placeholder="Indtast adresse"
        renderMenuItemChildren={(opt) => (
          <>
            <span>{opt.tekst}</span>
          </>
        )}
        />    
        {hest.length > 0 && 
          <ResultsDisplay 
            grund={grund}
            hest={hest} 
            />
        }
    </>

    );
}

export default AsyncSearch;

Child component (ResultsDisplay.js)

import { useState } from "react"
import { Container } from 'react-bootstrap'; 

const ResultsDisplay = (hest, grund) => { 
    
    console.log(`grund = ${grund}`)
    return(
        <>
            <Container>
                <h2>Grund</h2>
                <p>{grund.grundareal}</p>
            </Container>
            {hest.hest.map((h, i) => {
                return (
                <Container>
                    <h2>Bygning</h2>
                    // ------ <snip> -----
                </Container>);
            })}
        </>
    );
}    
export default ResultsDisplay;

In the above example, the value of “grund” is necever passed correcly from AsyncSearch to ResultsDisplay. If I debug the value of grund.grundareal inside AsyncSearch the value is correct (i.e. it’s an object with the property grundareal = some integer). However, after passing “grund tod” to ResultsDisplay, it shows up simply as an empty object.
What am I doing wrong? Could this be related to how the “grund” object is passed over to ResultsDisplay?