brand logo is not show correctly in navbar on react js project?

Question

I am trying to add brand logo on exact before the brand name, I write the syntax using that logo is added but it not showing, so how I can adjust the brand logo before the brand name

import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Button, ButtonToolbar, Navbar, Nav, NavItem, NavDropdown, MenuItem, Form, FormControl } from 'react-bootstrap';

const App = () => {
    return (
        <Navbar bg="light" expand="lg">
            <Navbar.Brand href="#home"><a href="#home"><img src="%PUBLIC_URL%/favicon.ico" /></a>Bee Ride Green</Navbar.Brand>
            <Navbar.Toggle aria-controls="basic-navbar-nav" />
            <Navbar.Collapse id="basic-navbar-nav">
                <Nav className="mr-auto">
                    <Nav.Link href="#home">Home</Nav.Link>
                    <Nav.Link href="#link">About</Nav.Link>
                    <Nav.Link href="#safety">Safety</Nav.Link>
                    <Nav.Link href="#contact">Contact</Nav.Link>
                    <ButtonToolbar>
                        <Button className="UseBeeApp" variant="outline-dark" color="#7647FF" href="https://play.google.com/store/apps/details?id=com.evrent.bee&hl=en">Use Bee App</Button>
                    </ButtonToolbar>
                </Nav>
                <Form inline>
                    <FormControl type="text" placeholder="Search" className="mr-sm-2" />
                    <Button variant="outline-success">Search</Button>
                </Form>
            </Navbar.Collapse>
        </Navbar>
    );
}




ReactDOM.render(<App />, document.querySelector('#root'));