marker not draggable react leaflet - react-leaflet

Question

why marker not draggable when i add the plus sign in the center of the map?
the react code:
import './App.css';
import { MapContainer, TileLayer, useMap, Marker } from 'react-leaflet'
function App() {
function LocationMarker() {
return (
<Marker
draggable={true}
position={[33.3152, 44.3661]}>
</Marker>
)
}
return (
<MapContainer
className={"center-of-map"}
zoomControl={false}
center={[33.3152, 44.3661]}
zoom={18}
scrollWheelZoom
attributionControl={false}
// style={{ height: "100vh" }}
>
<TileLayer
attribution=''
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<LocationMarker />
</MapContainer>
);
}
export default App;
.leaflet-container{
width: 100vw;
height: 100vh;
}
.center-of-map:before {
position: absolute;
content: "\271B";
z-index: 401;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
font-size: 3rem;
}
enter code here