diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx
index b211b420..34a7b6c4 100644
--- a/src/components/floor-plan/CanvasMenu.jsx
+++ b/src/components/floor-plan/CanvasMenu.jsx
@@ -79,7 +79,7 @@ export default function CanvasMenu(props) {
   const { floorPlanState, setFloorPlanState } = useContext(FloorPlanContext)
   const { restoreModuleInstArea } = useModuleBasicSetting()
 
-  const addedRoofs = useRecoilValue(addedRoofsState)
+  const [addedRoofs, setAddedRoofsState] = useRecoilState(addedRoofsState)
   const [basicSetting, setBasicSetting] = useRecoilState(basicSettingState)
   const selectedRoofMaterial = useRecoilValue(selectedRoofMaterialSelector)
 
@@ -118,6 +118,16 @@ export default function CanvasMenu(props) {
 
   const changeSelectedRoofMaterial = (e) => {
     setBasicSetting({ ...basicSetting, selectedRoofMaterial: e })
+
+    const newAddedRoofs = addedRoofs.map((roof) => {
+      if (roof.index === e.index) {
+        return { ...roof, selected: true }
+      } else {
+        return { ...roof, selected: false }
+      }
+    })
+
+    setAddedRoofsState(newAddedRoofs)
   }
 
   const settingsModalOptions = useRecoilState(settingModalFirstOptionsState)