How do I pass down props to another function using TypeScript?

I am not proficient with TypeScript but I am trying to pass down the {product.picture} which is a string to the function saveInfo() once the user clicked save. I can display the picture but I could not post it to the server once I clicked the save button. The error stated “Cannot find product”.

Appreciate any help on this.

function App() {
    
    const saveInfo = async (product) => {
    let response = await axios.post('https://localhost:3000', {
      data: {
        image: `https://image/${product.picture}.png`,
      },
    });

  return (
    <div className="App">
            <div>
                products.map((product: any) => (
                  <div className="product" key={product.id}>
                    <h5>{product.name}</h5>
                    <img
                      src={`https://image/${
                        product.picture as string
                      }.png`}
                      alt="symbol"
                    />
                  </div>
                ))
            </div>
            <button onClick={() => saveInfo(product)}>Save</button>
    </div>
  );
}