javascript – How to refactor current context into useCallback hook

I have done with ModalPicker component functionality but I want to avoid unnecessary re-renders in my current code. For the sake of simplicity, I removed some irrelevant code.

// app/components/Home.js

import ModalPicker from './ModalPicker';
import FloatingButton from './FloatingButton';

const Home = () => {
  const (modalVisible, setModalVisible) = useState(false);
  const changeModalVisibility = (bool) => {
    setModalVisible(bool);
  };

  return (
    <SafeAreaView>  
      <FloatingButton
        icon='funnel-outline'
        color='white'
        onPress={() => changeModalVisibility(true)}
      />
      <Modal
        transparent={true}
        animationType='fade'
        visible={modalVisible}
        onRequestClose={() => changeModalVisibility(false)}
      >
        <ModalPicker
          changeModalVisibility={changeModalVisibility}
          setData={setData}
        />
      </Modal>
    </SafeAreaView>
  );
};

export default Home;

The complete version can be found here: Home.js

How can I refactor changeModalVisibility into useCallback hook?

enter image description here