как вернуть значение useState

Ребят помогите разобраться не могу допереть как сделать что бы значение useState из одного файла возвращались в другой вот у меня есть 3 файла и в одном лежат хуки я их экспортирую во 2 файл и value принимает их значение и в 3 файле есть div который можно передвигать , но проблема в том что мне надо что бы я допустим менял положение див в value и он его менял , но этого не происходит так же как если бы я перемещал див и value принимал значение diva при его перемещение, помогите это сделать , то я только начал изучать React и не совсем понимаю как это можно сделать , надеюсь вы поняли о чем я...

Вот файл первый где хранятся хуки

import React,  {useState, useRef, useEffect}  from "react";

export default function Hooks() {
    // перемещение по нажатию лкм
    const[pressed,setPressed]=useState(false);
    const[position,setPosition]=useState({x:0,y:0});
    const ref=useRef();
    
    useEffect(()=>{
    if(ref.current){
    ref.current.style.left=`${position.x}px`;
    ref.current.style.top=`${position.y}px`
    }},[position]);
    
    const onMouseMove=(event)=>{
    if(pressed){
    setPosition({
    x:position.x+event.movementX,
    y:position.y+event.movementY
    })}};
    
    const handleChange=(e,type)=>{
    setPosition((prev)=>{
    return {...prev,[type]:e.target.valueAsNumber}
    })};
    
    // мгновенное выделение текста в содержимом валуе
    const inputX=useRef();
    const editItemX=()=>{
    inputX.current.select();
    }
    const inputY=useRef();
    const editItemY=()=>{
    inputY.current.select();
};
    
    
    
return {
    pressed,setPressed,position,setPosition,ref,onMouseMove,setPosition,
    handleChange,state,updateState,MeaningSnumber,setMeaningS,handleInput,
    onChangeS,updateState,setMeaningS,inputX,inputY,inputW,inputH,inputR,
    inputBR,inputPX,editItemX,editItemY,editItemW,editItemH,editItemR,editItemBR,
    editItemPX,MeaningWnumber,MeaningHnumber,MeaningRnumber,MeaningBRnumber,
    MeaningPXnumber,setMeaningW,setMeaningH,setMeaningR,setMeaningBR,setMeaningPX,
    onChangeW,onChangeH,onChangeR,onChangeBR,onChangePX,styles
}};

Вот второй файл который принимает изменения дива и так же их передает

import React, {useRef, useEffect, useState} from 'react';  
import Hooks from "../hooks/Hooks";
      
function LeftColumn() {

const {
position,handleChange,state,MeaningSnumber,handleInput,onChangeS,inputX,inputY,
inputW,inputH,inputR,inputBR,inputPX,editItemX,editItemY,editItemW,editItemH,
editItemR,editItemBR,editItemPX,MeaningWnumber,MeaningHnumber,MeaningRnumber,
MeaningBRnumber,MeaningPXnumber,onChangeW,onChangeH,onChangeR,onChangeBR,onChangePX
} = Hooks();
    
        return (
            <div className="container-main">    
                    {/* контейнер полей style */}
                    <div className='meaning-cl'>
                        <div className='input_con'>
                            <div className='input_w-0'>
                            <p className='meaning_txt-x'>X</p>
                                {/* поле ввода значений по X */}
                                <input 
                                type="number" 
                                min="-9999" 
                                max="9999"  
                                className='input-controls' 
                                value={position.x} 
                                onChange={(e) => handleChange(e, "x")}
                                onClick={editItemX}
                                ref={inputX}
                                name="MeaningX" 
                                id="MeaningX"
                                />
                            </div>
                            <div className='input_w-0'>
                            <p className='meaning_txt-x'>Y</p>
                                {/* поле ввода значений по Y */}
                                <input type="number" 
                                min="-9999" 
                                max="9999" 
                                className='input-controls' 
                                value={position.y} 
                                onChange={(e) => handleChange(e, "y")}
                                onClick={editItemY}
                                ref={inputY}
                                name="MeaningY" 
                                id="MeaningY"
                                />
                            </div>
                        </div>
                     </div>
                 </div>    
        );
    };
    
    export default LeftColumn;

И вот 3 файл где див перемещается и он должен принимать значение из value и так же их передавать при перемещении , но не понимаю как это сделать

    import React from "react";
    import LeftColumn from "./LeftColumn";
    import Hooks from "../hooks/Hooks";
    
    function RedactorMenu() {
        
        const {pressed,setPressed,ref,onMouseMove,styles} = Hooks();
    
        return (
            <div className="container-main anim-c" style={{ position: "absolute", width: "100%", height: "100%", animation: "1s Redactiractive"}} >
    
                <LeftColumn />
                    <div className='boxControl'  id='boxSliderOne'> 
                    <div className='boxControlZoom'  id='ZoomBox'>
                        
                        {/* блок по смене контента */}
                        <div className='container-slider'>
                          {/* тест див присваивание стилей от левой колонке */}
                            <div
                            onClickCapture={() => setPressed(false)} 
                            className={pressed ? "box_0-active" : "box-0"}
                            ref={ref}
                            style={styles}
                            onMouseMove={onMouseMove}
                            onMouseDown={() => setPressed(true)}
                            onMouseUp={() => setPressed(false)}
                            onMouseLeave={() => setPressed(false)}
                            tabIndex={0}
                            >
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    };
    export default RedactorMenu;