我可以从一个组件更改另一个组件的状态吗？

// 父组件
import React, { useState } from 'react';
import Cart from './Cart';
import ProductList from './ProductList';

function App() {
  const [cartItems, setCartItems] = useState([]);

  return (
    <div>
      <ProductList cartItems={cartItems} setCartItems={setCartItems} />
      <Cart cartItems={cartItems} />
    </div>
  );
}

export default App;

// 子组件 ProductList
import React from 'react';

function ProductList({ cartItems, setCartItems }) {
  const addToCart = (product) => {
    setCartItems([...cartItems, product]);
  };

  return (
    <div>
      {products.map(product => (
        <div key={product.id}>
          <h3>{product.name}</h3>
          <button onClick={() => addToCart(product)}>Add to Cart</button>
        </div>
      ))}
    </div>
  );
}

export default ProductList;

// 子组件 Cart
import React from 'react';

function Cart({ cartItems }) {
  return (
    <div>
      <h2>Cart</h2>
      <ul>
        {cartItems.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default Cart;