我试图显示<BR/>组件，如果值为真，否则显示<Nothing/>组件。但由于某种原因，尽管value为假，但<BR/>正在显示。
PC.js代码

import React,{useContext, useState} from 'react'
import { BRcontext } from "../App";
import './Profile.css';
import { useNavigate } from "react-router-dom"

export default function Profile() {
   const [value, setValue] = useState(false);
   localStorage.setItem("Value", value);
   console.log(value);
   const navigate = useNavigate();
   return (
       <div>
           <div className='container mt-5'>
               <div className='row'>
                   <div>
                       <h3 className='mt-5'>Send Request</h3>
                       <button className='btn btn-success mt-3 ps-3 pe-3' onClick={() => {setValue(true)}}>Request</button>
                   </div>
               </div>
           </div>
       </div>
   )
}

BR1.js代码

import React, { useContext } from "react";
import BR from "./BR";
import Nothing from './Nothing'

export default function BR1() {
    const val = localStorage.getItem('Value');
  return (
    <div>
      {console.log(val)}
      {val ? <BR/> : <Nothing/>}
    </div>
  );
}

BR.js

import React from 'react'
import './Profile.css';

export default function BR() {
    let values = false;
    return (
        <div>
            <div className='container mt-5'>
                <div className='row'>
                    <div>
                        <h3 fontSize="150px">Do you want to be a ....?</h3>
                        <button type="button" className="btn btn-success ml-5 mt-3 mr-1">YES</button>
                        <button type="button" className="btn btn-danger ms-5 mt-3 mr-1"  onClick={() => {localStorage.removeItem('Value')}}>NO</button>
                    </div>
                </div>
            </div>
        </div>
    )
}

localStorage中的值正在正确更新，val也正在更新，但如果value是false，则当我需要<Nothing/>组件时，仍会显示<BR/>组件