Error: Nothing was returned from render... in MERN Stack Application

Question

I'm trying to render picture equals to chosen color, but I'm getting the following error for some reason:

Uncaught Error: RenderProductImage(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

Here are my functions:

const {productData} = useContext(ProductContext);
const [products, setProducts] = useState([]);
const [color, setColor] = useState([]);

const ParsedColors = props => {
        return(
            props.product.color.map(col => {
                const parsed = JSON.parse(col)
                return(
                    <button name="color" value={parsed.value} style={{backgroundColor: `${parsed.value}`}} onClick={() => colorPicker([props.product._id, parsed.value])}/>
                )
            })
        )
    }

    const colorPicker = ([productId, colors]) => {
        setColor([productId, colors])
        if(products.some(product => product._id === productId)) {
            RenderProductImage(products.find(product => product._id === productId))
        }
    }

    const RenderProductImage = (product) => {
        return(
            product.imageFile?.map(image => {
                if(image.originalname.includes(color[1]?.substring(1))) {
                    return (
                        <img src={require(`./styles/images/${image.originalname}`).default} alt="product img" />
                    )
                }
            })    
        )
    }

Here is how I use it:

{color.length > 0 ?
         <RenderProductImage />
        :
         <>
           {product.imageFile.map(image => {
             if(image.originalname.includes('def')) {
             return (
             <img src={require(`./styles/images/${image.originalname}`).default} alt="product img" />
             )
           }
         })}
        </>
       }
       <div className="product--Colors--Container">
          <ParsedColors product={product}/>
       </div>

So the condition is working and the image that includes('def') is rendering but when I choose color I'm getting the error.

UPDATE:

Function:

const RenderProductImage = props => {
        if(products.some(product => product._id === props.productId)) {
            return(
                products.find(product => product._id === props.productId).imageFile?.map(image => {
                    if(image.originalname.includes(color[1].substring(1))) {
                        return (
                            <img src={require(`./styles/images/${image.originalname}`).default} alt="product img" />
                        )
                    }
                })
            )
        }
    }

Use:

 {color.length > 0 ?
                                            <RenderProductImage product={product} />
                                        :
                                        <>
                                            {product.imageFile.map(image => {
                                                if(image.originalname.includes('def')) {
                                                    return (
                                                        <img src={require(`./styles/images/${image.originalname}`).default} alt="product img" />
                                                    )
                                                }
                                            })}
                                        </>

Colors data:

Answer 1

Change your RenderProductImage function like below:-

    const RenderProductImage = (props) => {
        return(
            props.product.imageFile?.map(image => {
                if(image.originalname.includes(color[1]?.substring(1))) {
                    return (
                        <img src={require(`./styles/images/${image.originalname}`).default} alt="product img" />
                    )
                }
            })    
        )
    }

Now you can access RenderProductImage like below:-

<RenderProductImage product={product} />

Change your condition to render product image like below:-

{(color.length > 0 && color[0] === product._id) ? ... }