reactjs – React Component keeps changing from controlled to uncontrolled even though nothing is undefined and I am using state

I keep getting a warning and an error as I am trying to make a basic dropdown using React MUI. I understand that the value cannot be undefined so I initialize state with a dummy object based on other questions I read but it still gives the warning.

Also I get the error that the component is switching from uncontrolled to controlled. As I understand it, to be a controlled component requires its value to be based on state and to have an onChange method. Both of those are true and yet…

Can anybody see what I cannot?

hook.js:608 MUI: You have provided an out-of-range value [object Object]for the select (name="Product") component. Consider providing a value that matches one of the available options or ''. The available values are[object Object], [object Object]. Error Component Stack

hook.js:608 Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component.

const [productsArray, setProductsArray] = useState([]);
const [selectedProduct, setSelectedProduct] = useState({name:"Select a product"});

{products.size > 0  && productsArray.length > 0 && 
  
    Product
     setSelectedProduct(p.target.value)}
    >
      {productsArray.map((p, i) => (
        
          {p.name}
        
      ))}
    
  
}

I have tried initializing state with a string. I have tried setting state through a method as well as directly in the onChange. I have tried setting the value to value={selectedProduct ?? ""}