Trying to render react components off database

Question

Basically this is my code to render components

  return (
    <>
      {props.Sites.map((Sites) => (

        <Box maxW='sm' borderWidth='1px' borderRadius='lg' overflow='hidden'>
          <Image src={Sites.imageUrl} alt={Sites.imageAlt} onClick={() => console.log(Sites.title)} />

          <Box p='6'>
            <Box display='flex' alignItems='baseline'>

              <Box
                color='gray.500'
                fontWeight='semibold'
                letterSpacing='wide'
                fontSize='xs'
                textTransform='uppercase'
                ml='2'
              >
                Inverters {Sites.Inverters}  &bull; Size {Sites.PvSize} kW
              </Box>
            </Box>

            <Box
              mt='1'
              fontWeight='semibold'
              as='h4'
              lineHeight='tight'
              isTruncated
            >
              {Sites.title}
            </Box>




          </Box>
        </Box>
      ))}

    </>

  )
}

i parse the object from props that the function then uses to render components. what I'm trying to do is have those objects come from a database such as mongogdb. ive been trying to use mongoose with express server but nothing seems to be working. right now the objects are just written up before the function renders and id rather it come form an actual db. i would like to know the proper approach to his kind of thing and where to go form here thanks.