Lifting State Up or how to get the value in another component without import

I have a lot of components I need to get a value called "values" from the SideBarBlurChange component to the SideBar component. I drew a diagram of my components so you can navigate easier

I read articles and how I understood there are two main options, the first is "Lifting State Up" and the second is "Redux" or "Context". I tried to apply these approaches but I failed.

The main problem is that inside the SideBarBlurChange component, I cannot import anything, since my entire project is collapsing. In addition to all this, I will leave a link to this project in the github if you want to see GitHub Project

Now I want to explain my problem in more detail.

Please pay attention to the changing number I showed with the mouse this number and there is a value with the name "values". I need to apply this value to the SideBar component to adjust the blur of the Sidebar.

And finally, before I demonstrate my code, I imported the SideBar inside the SideBarBlurChange, took out a value called "values" and applied it to the SideBar component like this <div style = {{backdropFilter: blur(${props.values}px)}}...

Now look my project has collapsed, I mean that there is a catastrophe for my components, but I got "values" and everything works for me.

Now I think that the problem is understandable, in order not to confuse you, I will show you three SideBar components, SideBarBlurChange and DraggableDialog where I imported SideBarBlurChange, + delete all personal code and show only the most important thing, but if you need to look at all the other components, I will remind you that I left a link to project in github, or as a last resort, tell me I will edit my question and show what you need in advance. I want to thank you for taking the time to solve my problem

SideBar.jsx

export default function SideBar(props) {
    return (
        <div style={{backdropFilter: "blur(60px)"}}>
            // jsx code
        </div>
    );
}

SideBarBlurChange.jsx

const MIN = 0;
const MAX = 100;

export default function SideBarBlurChange(props) {

    const ls = parseInt(window.localStorage.getItem('values'));
    const [values, SetValues] = useState(ls ? [ls] : [20]);

    const SaveChanges = () => {
        localStorage.setItem('values', values);
    }

    return (
        <>
            <div>
                <Range
                    // code
                />
                <output style={{ marginTop: "30px" }} id="output">
                    {values[0].toFixed(1)}
                </output>

                <button onClick={() => SaveChanges()}>Save</button>
            </div>
        </>
    );
}

DraggableDialog.jsx

const DraggableDialog = (props) => {
    return (
        <>
            <div>
                <SideBarBlurChange {...props}/>
            </div>
        </>
    );
};

export default DraggableDialog;

I removed a lot of code from these three components, I left only the most important. Sorry in advance, I don't know English, I wrote it all with the help of translate