Reactjs 如果查询不存在，如何返回所有产品

我的网站快完成了，我的查询有问题.我已经可以搜索到产品的名称了.

但如果找不到搜索的名称，我想呈现所有产品.

import { Box } from '@mui/material'
import React from 'react'
import { useState } from 'react'
import { useEffect } from 'react'
import { publicRequest } from '../requestMethod'
import CardProduct from './CardProduct/CardProduct'

const ProductListAfterSearch = ({query}) => {
  const [selectedProduct, setSelectedProduct] = useState([])

  console.log(query)

  useEffect(() => {
    const getProducts =  async () => {
      const res = await publicRequest.get(query ? `/products/search?searchQuery=${query}` : 'http://localhost:5000/api/products/')
      setSelectedProduct(res.data)
    }
    getProducts()
  }, [query])



  return (
    !selectedProduct.length? 'Product do not exist......': 
    <Box sx={{display: 'flex', flexWrap: 'wrap', gap: {xs: '0px', md: '10px'}, justifyContent: 'center'}}>
      {selectedProduct.map((product) => (
        <CardProduct query={query} key={product._id}  product={product}/>
      ))}
    </Box>
  )
}

export default ProductListAfterSearch

ParentChild/SearchProduct.js

const SearchedProducts = () => {

  const location = useLocation()
  const query = location.pathname.split('/')[2]

  
  return (
    <Box>
        <Navbar />
        <Sidebar  />
        <ProductListAfterSearch query={query}  />
        
    </Box>
  )
}