Can't change ref.current.props.visible in typescript

trying to change .current but i get "cannot assign to read only property 'visible' of object '#'

i think changing localVarRef.current.props.visible directly is fine because useRef is MutableRefObject.

i want my 'close' function in a Button so that i can close Modal by pushing Button with 'close' function

thanks in advance

const App = () => {const localVarRef = useRef<null | Modal>(null);  const [isOpen, setIsOpen] = useState(false);  console.log('initial state', localVarRef.current);  console.log(localVarRef.current.props);  const close = () => {    if (localVarRef.current?.props.visible === true) {      console.log(typeof localVarRef.current.props.visible);      localVarRef.current.props.visible = !localVarRef.current.props.visible;    }  };  const open = () => {    if (localVarRef.current?.props.visible === false) {      // eslint-disable-next-line eqeqeq      console.log(localVarRef.current);      localVarRef.current.props.visible = true;    }  };  const onClickMenu = useCallback(() => {    setIsOpen(!isOpen);    // console.log(isOpen);  }, [isOpen]);  return (<View style={styles.centeredView}><Modal        ref={localVarRef}        animationType="slide"        transparent={false}        visible={true}><View style={styles.centeredView}><View style={styles.modalView}><Text style={styles.modalText}>Hello World!</Text><Pressable              style={[styles.button, styles.buttonClose]}              onPress={onClickMenu}><Text style={styles.textStyle}>Hide Modal</Text></Pressable></View></View><Pressable style={[styles.button]} onPress={close}><Text style={styles.modalText}>close button</Text></Pressable></Modal><Pressable        style={[styles.button, styles.buttonOpen]}        onPress={onClickMenu}><Text style={styles.textStyle}>Show Modal</Text></Pressable></View>  );};export default App;

this is my console. as you can see i want to change visible property with my 'close' function.enter image description here