I've made a component that rotates an image. Since I'll need to rotate different images, I wanted to pass an image into the component, rather than making a new rotating image component file for each new image.

Here is my App.js. Notice how I'm trying to pass the image yellowFlower into a component called RotateYellow

import "./styles.css";
import Rotate from './components/Rotate'
import RotateYellow from './components/RotateYellow'
import yellowFlower from './images/yellowFlower.png'

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <div className="container">
  <span><p> hello </p> <Rotate /> </span>
  <p> 2 </p>
  <p> 3 </p>
</div>
      <span>Start editing to see some! 
      </span> <RotateYellow src={yellowFlower}/>

    </div>
  );
}

I've tried to create a function in my rotate component file to take in any image, but it's always showing a broken image when rendered.

import React from 'react';
import { motion } from 'framer-motion';
// import Flower1 from '../images/flowerTrans.png'; // gives image path
import styles from './components.module.css'

const RotateYellow = (image) => {
  const [isActive, setIsActive] = React.useState(false);

  return (
    <motion.div
      onClick={() => setIsActive(!isActive)}
      animate={{
        rotate: isActive ? 90 : 0,
      }}
    >
      <img src={image} className={styles.flower} alt="this is a flower" />
 

    </motion.div>
    
  );
  
};

export default RotateYellow; 

Thanks for your help