if you are using material-ui-dropzone, it actually creates an uncontrolled Material-UI Dropzone. If it is uncontrolled, you are not getting any out of the box support for disabling the component but instead you can apply a css property on the parent div of DropzoneArea

 <div className='drag-and-drop' style={{ pointerEvents: checkIfConditionIsFulfilled? "none" : "all }} > <DropzoneArea Icon="none" filesLimit={1} showPreviews={true} defaultValue={relatedPartyDetails.upload_evidence} showPreviewsInDropzone={false} useChipsForPreview previewGridProps={{ container: { spacing: 1, } }} dropzoneText='Upload Evidence' previewText="" onChange={(file) => handleChangeFile(file[0], index)} /> </div> style={{ pointerEvents: checkIfConditionIsFulfilled? "none" : "all }} on ```` You will need to write checkIfConditionIsFulfilled on the basis of your states.  

if you are using material-ui-dropzone, it actually creates an uncontrolled Material-UI Dropzone. If it is uncontrolled, you are not getting any out of the box support for disabling the component but instead you can apply a css property on the parent div of DropzoneArea

 <div className='drag-and-drop' style={{ pointerEvents: checkIfConditionIsFulfilled? "none" : "all }} > <DropzoneArea Icon="none" filesLimit={1} showPreviews={true} defaultValue={relatedPartyDetails.upload_evidence} showPreviewsInDropzone={false} useChipsForPreview previewGridProps={{ container: { spacing: 1, } }} dropzoneText='Upload Evidence' previewText="" onChange={(file) => handleChangeFile(file[0], index)} /> </div> style={{ pointerEvents: checkIfConditionIsFulfilled? "none" : "all }} 

You will need to write checkIfConditionIsFulfilled on the basis of your states.

if you are using material-ui-dropzone, it actually creates an uncontrolled Material-UI Dropzone. If it is uncontrolled, you are not getting any out of the box support for disabling the component but instead you can apply a css property on the parent div of DropzoneArea -> style={{ pointerEvents: checkIfConditionIsFulfilled? "none" : "all }} on conditional basis.

if you are using material-ui-dropzone, it actually creates an uncontrolled Material-UI Dropzone. If it is uncontrolled, you are not getting any out of the box support for disabling the component but instead you can apply a css property on the parent div of DropzoneArea

 <div className='drag-and-drop' style={{ pointerEvents: checkIfConditionIsFulfilled? "none" : "all }} > <DropzoneArea Icon="none" filesLimit={1} showPreviews={true} defaultValue={relatedPartyDetails.upload_evidence} showPreviewsInDropzone={false} useChipsForPreview previewGridProps={{ container: { spacing: 1, } }} dropzoneText='Upload Evidence' previewText="" onChange={(file) => handleChangeFile(file[0], index)} /> </div> style={{ pointerEvents: checkIfConditionIsFulfilled? "none" : "all }} on ```` You will need to write checkIfConditionIsFulfilled on the basis of your states.