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 && 
  <FormControl fullWidth>
    <InputLabel id="productLabel">Product</InputLabel>
    <Select
      id="productSelector"
      labelId="productLabel"
      label="Product"
      name="Product"
      value={selectedProduct}
      onChange={p => setSelectedProduct(p.target.value)}
    >
      {productsArray.map((p, i) => (
        <MenuItem 
          name={p.name} 
          key={i} 
          value={p}
        >
          {p.name}
        </MenuItem>
      ))}
    </Select>
  </FormControl>
}

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 ?? ""}

I think it is because you are passing an object to te value parameter of the Select. You could pass to the value paramter "value={selectedProduct.name}". This is for the first error. The second one is because the value you are passing to the select does not match any item in the menu items. To fix this you could try adding a default value to the menu items like this before the products map

<MenuItem value="">Select a product</MenuItem>

Also, i didn't test but think it works, you could set this new menu item to disabled so it cannot be selected by the user.