React Quill: UseState hook does not re-render "modules" property

Question

Im working on hiding the text editor header menu when the "editor" column is not selected. Basically I'm trying to show modules1 when onFocus is called and modules2 when onBlur is called. I'm using a React useState() hook that I think I implemented correctly but for some reason the editor doesnt render modules1 correctly when the user focuses on the text editor.

const modules1 = {
  toolbar: [
    [{ 'header': '1'}, {'header': '2'}, { 'font': [] }],
    ['bold', 'italic', 'underline'],
    [{ 'color': [] }],
    [{ 'background': [] }],
    [{ 'list': 'ordered'}, { 'list': 'bullet' },]
  ],
  clipboard: {
    // toggle to add extra line breaks when pasting HTML:
    matchVisual: false,
  }
};

const modules2 = {
  toolbar: false,
  clipboard: {
    // toggle to add extra line breaks when pasting HTML:
    matchVisual: false,
  }
};

const formats = [
  'header', 'font', 'bold', 'italic', 'underline', 'color', 'background', 'list'
];


const RichTextEditorCell = ({ value, onValueChange }) => {

  const [currentModule, setCurrentModule] = useState(modules2);
  const handleFocus = () => {
    setCurrentModule(modules1);
}
const handleBlur = () => {
  setCurrentModule(modules2);
}
  return(
  <ReactQuill
    value={value}
    onChange={onValueChange}
    modules={currentModule}
    formats={formats}
    theme="snow"
    onKeyDown={(event) => {
      event.stopPropagation();
    }}
    onFocus={handleFocus}
    onBlur={handleBlur}
  />)
  };

const columns = [
    {
      field: 'editor',
      headerName: <Typography>Editor</Typography>,
      sortable: false,
      width: 500,
      renderCell: (params) => (
        <RichTextEditorCell
          value={params.row.editor || ''}
          onValueChange={(content) => {
            params.row.editor=content;
          }}
        />
      ),
    },
  ];

I tried debugging with the inspect tool. I verified that onBlur and onFocus is called correctly when the user clicks on the editor.